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

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.我如何解决这个问题,以便能够通过写入地址栏的路径来打开特定的portafolio？

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

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};

@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/如此,所以我在2中拆分了sublime并仔细寻找差异,我发现这个<base href="./">不同于<base href="/">一个简单的点导致了错误.当我克隆项目时,点在那里,或者我把它放在那里是因为我不知道的一些奇怪的原因.希望这有助于某人.

Answer 1

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