我使用多个路由器输出来加载我的组件。 外部路由器导出用于加载最基本的组件,如登录、主页、404。 我使用嵌套的路由器 socket 来加载主页的子组件。该路由器导出嵌套在 home.component 中。
home.component.html
<app-header></app-header>
<router-outlet name="homeRoute"></router-outlet>
<app-footer></app-footer>
app.module.ts
const appRoutes: Routes = [
{path: '', component: HomeComponent, children: [
{path: '', component: DashboardComponent, outlet: 'homeRouter'},
{path: 'user', component: UserComponent, outlet: 'homeRouter'},
{path: 'user/:id', component: UserdetailComponent, outlet: 'homeRouter'}
]},
{path: 'login', component: LoginformComponent},
{path: '**', component: NotfoundComponent}
];
HomeComponent 和 LoginformComponent 需要从外部 router-outlet 加载。 Home 组件包含名为“homeRouter”的内部路由器导出,我想用它来加载主页的子组件。 但是内部路由器的导航不起作用。我尝试使用 router.navigate() 方法和 URL 访问每个组件。但是两者都没有达到预期的效果。
谁能告诉我这段代码有什么问题。我检查并尝试了几个以前关于同一问题的问题,但没有一个工作正常。
这是我为不同组件尝试的 URL
http://localhost:4200
dashboardComponet(这个有效)http://localhost:4200/user
userComponent(不起作用。路由到 notFoundComponent)http://localhost:4200/user/U001
userDetailComponent(不工作。仍然路由到 notFoundComponent)
最佳答案
对于 nesetd 路由,您不需要命名路由器导出,您可以从路由中删除 outlet: 'homeRouter'
并从 router-outlet 中删除 name="homeRoute"
它应该有效。
话虽如此,如果您有多个 router-outlet 的需求,以便您可以在主路由的同时加载辅助路由,则 router-outlet
的名称应与 outlet 相同
属性。在您使用的 route ,您有 socket :“homeRouter”和 name="homeRoute",它们应该相同。
这是一个包含多层嵌套路由的完整示例,
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ActivatedRoute, RouterModule, Routes } from '@angular/router';
@Component({
selector: 'my-app',
template: `<h1>Hello</h1>
<a routerLink="/" >Home</a>
<a routerLink="/admin" >Admin</a>
<a routerLink="/nonexistingroute" >Non existing Route</a>
<hr />
<router-outlet></router-outlet>
`
})
export class AppComponent {
}
@Component({
template: `<h1>Home</h1>
<a routerLink="/" >Dashboard</a>
<a routerLink="/users" >Users</a>
<hr />
<router-outlet></router-outlet>
`
})
export class HomeComponent { }
@Component({
template: `<h1>Admin</h1>
`
})
export class AdminComponent { }
@Component({
template: `<h1>Dashboard</h1>
`
})
export class DashboardComponent { }
@Component({
template: `<h1>Users</h1>
<a routerLink="user/1" >User 1</a>
<a routerLink="user/2" >User 2</a>
<hr />
<router-outlet></router-outlet>
`
})
export class Users { }
@Component({
template: `<h1>User {{id}}</h1>
`
})
export class UserdetailComponent {
id = '';
constructor(private readonly route: ActivatedRoute) {
this.route.params.subscribe(params => {
this.id = params.id;
});
}
}
@Component({
template: `<h1>Not found</h1>
`
})
export class NotfoundComponent { }
const appRoutes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{ path: '', component: DashboardComponent },
{
path: 'users', component: Users,
children: [
{ path: 'user/:id', component: UserdetailComponent }
]
}
]
},
{
path: 'admin',
component: AdminComponent
},
{ path: '**', component: NotfoundComponent }
];
@NgModule({
imports: [BrowserModule, RouterModule.forRoot(appRoutes)],
declarations: [AppComponent, HomeComponent, AdminComponent, NotfoundComponent, DashboardComponent, Users, UserdetailComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
关于angular - 在 Angular 4 中使用嵌套路由器 socket ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46427833/