angular - 无法使用父命名路由器导出导航到嵌套/子路由

Question

我之前在 AngularJS 中使用过 ui-router，然后在 Angular 2+ 中使用过。我想转移到 @angular/router 只是因为它似乎得到更多支持并且在其上构建了更多库(ui-router-ng2 仍处于测试阶段!!)

我的问题是我使用的主模板命名为 route outlets，因为主模板有一个重复使用的静态页眉和页脚。 (还有一个侧边栏，为了简洁起见我把它去掉了)

我的问题是，一旦我进入我的“/mainDashboard”路由器，我就无法从该路由导航到下一个嵌套/子路由“/otherDashboard”，同时尝试在主模板“content”中使用命名路由器导出'

我应该如何导航到下面代码第十三行中的路线。还有一个plunker https://plnkr.co/edit/RErIiby535x0toaA02W4?p=preview

这是我的代码

import { NgModule, Component } from '@angular/core';
import { RouterModule, Router } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'app-home',
  template: '<button (click)="go()">Go To Other Dashboard</button>'
})
export class HomeComponent {
  constructor( public router: Router ) {}
  go(){ 
    //THIS ERRORS
    this.router.navigate(['../dashboard',{outlets: {'content': ['../dashboard/mainDashboard/otherDashboard']}}]);
  }
}

@Component({
  selector: 'app-main-dashboard',
  template: `
    <header>My Static Header</header>
    <div id="main-container" class="main-background">
        <router-outlet name="content"></router-outlet>
    </div>
    <footer>My Static Footer</footer>
  `
})
export class MainDashboardComponent {
  constructor() {}
}

@Component({selector: 'app-login',template: '<button (click)="login()">Login</button>'})
export class LoginComponent {
    constructor(public router: Router) { };
    login(){
        this.router.navigate(['/dashboard',{outlets: {content: ['mainDashboard']}}]);
    }
}

@Component({selector: 'app-other-dashboard', template: '<h1>Hello Other Dashboard</h1>'})
export class OtherDashboardComponent{
  constructor() { }
}

export const routes: Array<any> = [
    {path: '',component: LoginComponent },
    {path: 'dashboard', component: MainDashboardComponent,
        children: [
            {path: 'mainDashboard',component: HomeComponent,outlet: 'content',
                children: [{path: 'otherDashboard',component: OtherDashboardComponent,  outlet: 'content'}]
            }
        ]
    }
]

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

    @NgModule({
      declarations: [ AppComponent, LoginComponent, MainDashboardComponent, HomeComponent, OtherDashboardComponent],
      imports: [ BrowserModule, RouterModule.forRoot(routes) ],
      providers: [],
      bootstrap: [AppComponent],
    })
    export class AppModule { }

Answer 1

在玩了你的 plunker 代码后，我发现了这个问题。由于您的 otherDashboard 是 mainDashboard 的子级，因此预计在 mainDashboard 内有 otherDashboard 的路由器导出。添加后，我就可以使用 router.navigateByUrl 导航到 otherDashboard 所以你的 HomeComponent 看起来像:

@Component({
  selector: 'app-home',
  template: '<button (click)="go()">Go To Other Dashboard</button><router-outlet name="content"></router-outlet>'
})
export class HomeComponent {
  constructor( public router: Router ) {}
  go(){ 
    //Error gone
    this.router.navigateByUrl('/dashboard/(content:mainDashboard/(content:otherDashboard))');
  }
}

如果您想在 MainDashboardComponent 本身中将 HomeComponent 替换为 OtherDashboardComponent，那么在 otherDashboard 和 中>mainDashboard 应该是 HomeComponent

相同父级的子级

工作代码:https://plnkr.co/edit/jYOMNhbE3lX5UYmjS7qy?p=preview