Angular 2 : Child Routes not working by address bar

Question

嘿，

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

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

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

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

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

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

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

这是引导组件:

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

@Component({
    selector : 'app-root',
    template: '<router-outlet></router-outlet>'
})
export class AppComponent {

} 

这是 OutletComponent 定义:

@Component({ 
  templateUrl: './outlet.component.html', 
  styleUrls: ['./outlet.component.css'] 
}) 
export class OutletComponent implements OnInit { 
 portafolios:any; 
 numero:string; 

 constructor(private _router:Router,
             private _activatedRoute:ActivatedRoute, 
             private _formservice : FormService) { 
  _activatedRoute.params.subscribe((parametro:Params) => this.numero = parametro['id']); 
   _formservice.data$.subscribe(data=> { this.portafolios=data }); 
} 

更新 2: 我认为 :id 可能有问题，所以我简化并创建了一个 TestComponent。

从“@angular/core”导入{组件}；

@Component({
    template: '<h1>Test</h1>',
})

export class TestRoutesComponent {

}

并添加了另一条路线

{path: 'testroutes',component: TestRoutesComponent} 

当我尝试通过地址栏访问时仍然是 http://localhost:4200/testroutes/我得到了同样的错误。

解决方案:好的，我创建了一个 angular-cli 项目，这次路由使用 router.navigate(['/testroutes')还有 http://localhost:4200/testroutes/所以我将 sublime 拆分为 2 并仔细寻找差异，我发现了这个 <base href="./">不同于 <base href="/">一个简单的点导致了错误。当我克隆该项目时，该点就在那里，或者我是否出于某种我不知道的奇怪原因将其放在那里。希望这对某人有帮助。

Answer 1

好的，我创建了一个 angular-cli 项目，这次路由使用 router.navigate(['/testroutes')还有 http://localhost:4200/testroutes/所以我将 sublime 拆分为 2 并仔细寻找差异，我发现了这个 <base href="./">不同于 <base href="/">一个简单的点导致了错误。当我克隆该项目时，该点就在那里，或者我是否出于某种我不知道的奇怪原因将其放在那里。希望这对某人有帮助。