• 使用辅助路由

    使用辅助路由

    Angular 2支持辅助路由的概念,它允许您在单个应用程序中设置和导航多个独立路由。 每个组件具有一个主路由和零个或多个辅助出口。 辅助出口必须在组件中具有唯一的名称。

    为了定义辅助路由,我们必须首先添加一个命名的路由出口,其中要呈现辅助路由的内容。

    这里有一个例子:

    1. import {Component} from '@angular/core';
    2. @Component({
    3. selector: 'app',
    4. template: `
    5. <nav>
    6. <a [routerLink]="['/component-one']">Component One</a>
    7. <a [routerLink]="['/component-two']">Component Two</a>
    8. <a [routerLink]="[{ outlets: { 'sidebar': ['component-aux'] } }]">Component Aux</a>
    9. </nav>
    10. <div style="color: green; margin-top: 1rem;">Outlet:</div>
    11. <div style="border: 2px solid green; padding: 1rem;">
    12. <router-outlet></router-outlet>
    13. </div>
    14. <div style="color: green; margin-top: 1rem;">Sidebar Outlet:</div>
    15. <div style="border: 2px solid blue; padding: 1rem;">
    16. <router-outlet name="sidebar"></router-outlet>
    17. </div>
    18. `
    19. })
    20. export class AppComponent {
    21. }

    接下来,我们必须定义到应用程序的辅助路由的链接,以导航和呈现内容。

    1. <a [routerLink]="[{ outlets: { 'sidebar': ['component-aux'] } }]">
    2. Component Aux
    3. </a>

    View Example

    每个辅助路由是独立的路由,可以拥有:

    • 自己的子路由
    • 自己的辅助路由
    • 自己的路由参数
    • 自己的浏览器历史记录栈