小编Rau*_*nte的帖子

Angular 2:Child Routes无法通过地址栏工作

喜,

我有一个工作的应用程序.当我通过单击移动到子组件时它可以工作,但是当我在地址栏上写入路径时它不起作用.

RouterModule.forRoot([               
        {
          path:'',
          component:SiteComponent,
          children: [{              
            path:'portafolio/:id',
            component:OutletComponent              
          }
          ]
        },      
        {
          path:'**',
          redirectTo: '',
          pathMatch: 'full'
        },       
        ]),
Run Code Online (Sandbox Code Playgroud)

当我导航到让我们说使用router.navigate(['/portafolio', portafolio.id])它的第一个投资组合工作正常.但是当我想通过写入地址栏localhost:4200/portafolio/1来导航到第一个投资组合时,它不起作用.它没有显示404错误.只显示'...',这是我<app-root>在index.html中的标签之间的内容.通配符工作正常,因为任何其他错误的地址重定向到SiteComponent.我如何解决这个问题,以便能够通过写入地址栏的路径来打开特定的portafolio?

更新:我将路由配置更改为:

RouterModule.forRoot([               
    {
      path:'',
      component:SiteComponent          
    },
    {  
      path: 'portafolio',
      component:SiteComponent,
      children: [{              
        path:':id',            
        component: OutletComponent
        }]          
    },      
    {
      path:'**',
      redirectTo: '',
      pathMatch: 'full'
    },       
    ])
Run Code Online (Sandbox Code Playgroud)

相同的行为.它工作正常,直到我尝试使用地址栏访问任何投资组合.这是我得到的错误:

2:19 GET http://localhost:4200/portafolio/inline.bundle.js 
2:19 GET http://localhost:4200/portafolio/polyfills.bundle.js 
2:19 GET http://localhost:4200/portafolio/styles.bundle.js 
2:19 GET http://localhost:4200/portafolio/vendor.bundle.js 
2:19 GET http://localhost:4200/portafolio/main.bundle.js
Run Code Online (Sandbox Code Playgroud)

这是自举组件:

import { Component } from '@angular/core';

@Component({
    selector : 'app-root',
    template: …
Run Code Online (Sandbox Code Playgroud)

angular2-routing angular

10
推荐指数
1
解决办法
2989
查看次数

标签 统计

angular ×1

angular2-routing ×1