已定义但未识别的 Angular2 RC1 子路由

Question

曾经适用于 beta/... 的功能已不再适用。使用新的 new RC1 路由器，我如何进行子路由？

文件夹结构

app
  |--home/
  |    |--home.component.ts
  |--login/
  |    |--login.ts
  |--appShell/
  |    |--app.component.ts
  |--apps/
       |--hero/
            |--hero-shell.component.ts  
            |--horees.component.ts 
            |--hero-detail.component.ts

规划的导航是

app.component -> home.component -> heroshell.component -> heroes.component 

app.component.ts 路由

@Routes([
    { path: '/heroshell', component: HeroShellComponent },
    { path: '/home',  component: HomeComponent },
    { path: '/login', component: Login },   
])
export class AppComponent implements OnInit {
  title = 'Apps';       
  constructor(public _auth: Authentication, 
              public router: Router,
              private _dialogService: DialogService
              ) {}      
  ngOnInit() {
    this.router.navigate(['/login']);
  }
  .......

登录成功后，Login类会

this.router.navigate(['/home']);

从 HomeComponent.ts 我可以做到

this.router.navigate(['/heroshell']);

到目前为止一切顺利，没问题。在 hero-shell.component.ts 我有子路由

@Component({
  selector: 'my-app1', 
  templateUrl: 'app/apps/hero/hero-shell.component.html',
  styleUrls: ['app/appshell/app.component.css'],
  directives: [ROUTER_DIRECTIVES],
  providers: [HeroService]
})

@Routes([
    { path: 'heroes', component: HeroesComponent },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'hero/:_id', component: HeroDetailComponent},
    ])
export class HeroShellComponent { // implements OnInit
  title = 'Hero Sample App';

  constructor(public _auth: Authentication, 
              public router: Router
              ) {} 
}

在 hero-shell.component.html 中

<my-app1>

<h1>{{title}}</h1>
<!--<button *ngIf="_auth.loggedIn" (click)="onLogout()">Logout</button>-->

<nav>
    <a [routerLink]="['dashboard']">Dashboard</a>
    <a [routerLink]="['heroes']">Heroes</a>
</nav>
<router-outlet></router-outlet>

</my-app1>

注意路径只能是'heroes'。如果我将 [routerLink] 和 @Routes 更改为 '/heroes' 它将不起作用。能帮忙解释一下为什么吗？

所以它现在可以识别子路由了。点击 routerLink heroes 会显示英雄列表。但是当我通过

从 HeroesComponent 详细说明它时

this._router.navigate(['hero/'+hero._id]); 

它爆炸了

browser_adapter.ts:78 EXCEPTION: Error: Uncaught (in promise): 
Cannot match any routes. Current segment: 'hero'. 
Available routes: ['/heroshell', '/home', '/login'].

这很奇怪。如果它不识别子路由，我怎么能首先进入 HeroesComponent 呢？现在子路由就消失了。

如果我用

this._router.navigate(['hero/'+hero._id],this.currSegment);

它会给出不同的错误

browser_adapter.ts:78 EXCEPTION: 
Error: Uncaught (in promise): Component 'HeroesComponent' does not have route configuration

那么这是否意味着所有子组件都必须重复使用@Routes？

Answer 1

Note that the path can only be 'heroes'. if I change to [routerLink] and @Routes to '/heroes' it won't work. Can some help explain why?

实际上，子路由器中的路径可以包含“/”作为前缀，但将 routerLink 更改为“/heroes”使其无法正常工作，因为导航路径中的“/”前缀将使用 root router 进行解析，并且没有“/英雄”路径。 “英雄”路径有效，因为它将使用当前路由器解析，并且您在当前子路由器中定义了该路径。

this._router.navigate(['hero/'+hero._id]);

在没有分段的情况下调用“导航”将使用根路由器解决。这意味着你想做绝对导航。显然这是行不通的。

this._router.navigate(['hero/'+hero._id],this.currSegment);

这也不起作用，因为你在 HeroesComponent 和“heroes”段，组件中没有路由器配置。正确的调用应该是:

this._router.navigate(['../hero', {_id: hero._id}], this.currSegment);