我之前在AngularJS中使用了ui-router,然后在Angular 2中使用了ui-router . 我想转移到@ angular / router只是因为它似乎更受支持并且更多的库 Build 在它上面(ui-router-ng2仍处于测试阶段!!)
我的问题是我使用的是一个名为route outlet的主模板,因为主模板有一个可重用的静态页眉和页脚 . (还有一个侧栏,我为了简洁而拿出来)
我的问题是,当我进入我的'/ 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 { }
1 回答
在使用您的plunker代码后,我发现了问题 . 由于
otherDashboard
是mainDashboard
的孩子,因此预计mainDashboard
内的otherDashboard
的路由器插座 . 一旦添加,我就可以使用router.navigateByUrl
导航到otherDashboard
所以你的HomeComponent
将如下所示:如果你想在
MainDashboardComponent
本身中用HomeComponent
替换HomeComponent
,那么otherDashboard
和mainDashboard
应该是HomeComponent
的同一父母的孩子工作代码:https://plnkr.co/edit/jYOMNhbE3lX5UYmjS7qy?p=preview