angular主路由，辅助路由

2019-12-08

因为项目需要，因此开始使用主路由和辅助路由，主路由和辅助路由可以用来分别控制项目的不同部分进行跳转，例如实现左半部分和右半部分分别跳转到不同的模块，展示不同的内容。

使用

在项目的根模块或次级的根模块，如mainPage.component的html中增加主路由和辅助路由的入口

<!-- 主路由  -->
<router-outlet></router-outlet>
...
<!-- 辅助路由  -->
<router-outlet name="secondPanel"></router-outlet>
...

在该模块的路由部分分别设置主路由和辅助路由的跳转路径:

const appRoutes: Routes = [
    { path: '', redirectTo: 'mainPage', pathMatch: 'full' },
    {
        path: 'mainPage',
        component: MainPageComponent,
        canActivate: [ConfigService], // 设置路由守卫 提前加载配置数据，
        resolve: {
            crisis: BasicDataService // 预加载基础数据
        },
        children: [
            {
                path: 'datasList',//列表页面
                component: DatasListComponent,
            },
            {
                path: 'content',//编辑页面
                component: DsContentComponent,
            },
            {
                path: 'datasDetail',//详情页面
                component: DatasDetailComponent,
            },
            {
                path: 'asideA',//辅助路由模块a
                component: asideAComponent,
                outlet: 'secondPanel'
            },
            {
                path: 'asideB',//辅助路由模块b
                component: asideBComponent,
                outlet: 'secondPanel'
            },
            {
                path: 'asideC',//辅助路由模块c
                component: asideCComponent,
                outlet: 'secondPanel'
            }
            { path: '', redirectTo: 'asideA', pathMatch: 'full', outlet: 'secondPanel' },
            { path: '', redirectTo: 'datasList', pathMatch: 'full' },
        ]
    }
];

在ts中使用：

只跳转主路由：

this.router.navigate(['content'], { relativeTo: this.route });

this.router.navigate([{ outlets: { primary: 'content' } }], {
            queryParams: { type: 'createNewData' },
            relativeTo: this.route
          });  // 带参数跳转

只跳转辅助路由：

this.router.navigate([{ outlets: { secondPanel: ['asideB'] } }], { relativeTo: this.route });

this.router.navigate([{ outlets: { leftPanel: ['asideC'] } }], {
        queryParams: data.data,
        relativeTo: this.route
      });  // 带参数跳转

主路由辅助路由一起跳转：

this.router.navigate([{ outlets: { primary: ['datasList'], leftPanel: ['asideA'] } }], { relativeTo: this.route });

this.router.navigate([{ outlets: { primary: ['content'], leftPanel: ['asideB'] } }], { queryParams: { type: 'accept' }, relativeTo: this.route }); // 带参数跳转

在html中的使用可以参考官方示例，https://stackblitz.com/angular/aeapbblxmka

<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/superheroes" routerLinkActive="active">Heroes</a>
<a routerLink="/admin" routerLinkActive="active">Admin</a>
<a routerLink="/login" routerLinkActive="active">Login</a>
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>

需要注意：如果想要主路由，辅助路由一起跳转，不可以先写一行跳转主路由，再写一行跳转辅助路由，应该只写一句navigate,实现两个路由一起跳转。

错误示例：

1	...
2	this.router.navigate([{ outlets: { primary: ['content']} }], { relativeTo: this.route });
3	this.router.navigate([{ outlets: { leftPanel: 'asideB' } }], { relativeTo: this.route });
4	...