多级路由

多级路由，又称子路由，是前端框架中不可或缺的一部分。

多级路由

前面我们已经有了一个用户的列表，这次我们的需求是: 点击每个用户数据，展示详情信息在本页面。

先创建一个 user组件，用来展示详情信息：

ng g c components/router-study/user/user -s -t -c OnPush --flat

1. 使用 children配置子路由：

// router-study-routing.module.ts
import {UserComponent} from './user/user/user.component';
const routes: Routes = [{path: 'users',component: UsersComponent,children: [{path: ':id',component: UserComponent}]},
];

2. users页面中设置跳转并预留路由出口：

// users.component.tstemplate: `<h3>User page</h3><ul class="list-group"><liclass="list-group-item"[class.active]="item.id === selectedId"*ngFor="let item of users$ | async"(click)="onSelected(item.id)"<!--   这里使用相对导航形式     -->[routerLink]="[item.id]">{{ item.name }}</li></ul><hr><router-outlet></router-outlet>`

3. user组件中获取数据并渲染：

// user.component.ts
@Component({selector: 'app-user',template: `<div *ngIf="user$ | async as user"><h4>{{user.name}}</h4><p><span>{{user.username}}</span> | Email: <span>{{user.email}}</span></p></div>`,changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserComponent implements OnInit {user$: Observable<User>;constructor(private userServe: UserService, private route: ActivatedRoute) { }ngOnInit(): void {this.user$ = this.route.params.pipe(switchMap(params => this.userServe.getUser(params.id)));}
}

如此，我们就创建了一个完整的子路由：

无组件路由

目前为止，我们每一条路由信息都配置了 ‘component’ 参数，其实， 如果没有配置对应的跳转组件也是可以的。

修改前面的 users路由：

// router-study-routing.module.ts
import {UserComponent} from './user/user/user.component';
const routes: Routes = [{path: 'users',children: [{path: '',component: UsersComponent,children: [{path: ':id',component: UserComponent}]}]},
];

其实这样配置最后的效果跟以前是没有区别的，目前为止，我所知道这样配置优点是利于配置路由守卫。（后面会遇到）

命名路由

目前为止，我们所有的路由的出口（outlet）都是一个默认的 outlet标签，其实，路由可以指定具体某个 outlet标签为出口。

生成一个 tips组件作为演示：

ng g c components/router-study/tips -t -s -c OnPush --flat

1. 设置跳转入口、预留命名出口（outlet）:

// router-study.component.ts
template: `<div class="container">...<ul class="nav nav-pills">...<li class="nav-item"><!--  意思是将tips组件插入到名叫tip出口    --><a class="nav-link"  [routerLink]="[{outlets: {tip: ['tips']}}]" routerLinkActive="active">to tips</a><!--  或者使用函数式跳转    --><!--  <a class="nav-link"  (click)="goTips()">to tips</a>   --></li></ul><router-outlet></router-outlet><!--  取名为tip    --><router-outlet name="tip"></router-outlet></div>`
...
// 函数式跳转
goTips(): void {this.router.navigate([{outlets: {tip: ['tips']}}]);
}

2. 配置命名路由：

// router-study-routing.module.ts
const routes: Routes = [{path: 'comments', component: CommentsComponent},{path: 'comment/:id', component: CommentComponent},{path: 'tips',component: TipsComponent,outlet: 'tip' // 这里就是出口的名字}
];

3. 修改组件模板内容：

// tips.component.ts
@Component({selector: 'app-tips',template: `<div class="tips"><p>tips content!!!!</p><div class="btn-group"><button class="btn btn-small btn-primary" (click)="onOk()">OK</button></div></div>`,changeDetection: ChangeDetectionStrategy.OnPush
})
export class TipsComponent implements OnInit {constructor(private router: Router) { }ngOnInit(): void {}// 这里的关闭是直接从DOM中移除onOk(): void {this.router.navigate([{ outlets: { tip: null }}]);}
}

从最后的结果可以看出：

• URL（http://localhost:4200/users/4(tip:tips)） 中包含一个主路由 users及第二个路由 (tip:tips)，出口名 tip和路径 tips；

• 第二个路由会一直存在与DOM结构中，直到关闭；

• 命名路由与其他路由组合使用，且相互独立。

总结

1. 多级路由使用 children数组进行配置，可以无限嵌套，与出口配套使用；

2. 路由跳转支持相对路径导航；

3. 命名路由跳转方式可以是 [routerLink]="[{outlets: {tip: ['tips']}}]或者 this.router.navigate([{outlets: {tip: ['tips']}}]);，销毁则设置成 null:this.router.navigate([{ outlets: { tip: null }}]);

欢迎关注我的公众号，公众号将第一时间更新angular教程：