以前用于beta/...的版本不再有效。使用新的新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英雄,将显示英雄列表。但是当我从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?现在, child 的路线刚刚消失了。

如果我用
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吗?

最佳答案



实际上,子路由器中的路径可以包含“/”作为前缀,但是将routerLink更改为“/heroes”会使它不起作用,因为导航路径中的“/”前缀将使用根路由器解析,并且没有“/heroes”路径。之所以使用“heroes”路径是因为它将使用当前路由器来解析,并且您已在当前子路由器中定义了该路径。



不使用段调用“导航”将使用根路由器来解决。这意味着您要进行绝对导航。显然,这是行不通的。



这也不起作用,因为您位于HeroesComponent和“heroes”网段,该组件中没有路由器配置。正确的电话应为:

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

关于定义但未识别的Angular2 RC1子路线,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37126836/

10-10 14:19