没有 AUX URL 的 Angular 2 嵌套 View

Question

我正在尝试 Angular 2 路由。

我的应用程序有 4 个页面和 4 个路由(r1、r2、r3、r4)。我想将这些页面的两组分开。 r1 和 r2 的“内容 1”字段将相同。对于 r3 和 r4，“内容 1”字段将相同，而“内容 2”字段将针对每条路线更改。

我可以通过调用模板中的组件来做到这一点，但正在重新编译“内容 1”字段。

我不想使用 AUX 路由。 URL 看起来很难看。

我以前可以在 Angular 1 中做到这一点。我如何在 Angular 2 中做到这一点？

Answer 1

您可以通过如下命名 router-outlet 来实现此目的。

假设您首先加载 appComponent，

app.component.html

<header></header>
<router-outlet name='content1_r1_r2'><router-outlet/>
<router-outlet name='content1_r3_r4'><router-outlet/>
<router-outlet name='content2'><router-outlet/>
<footer></footer>

按如下方式配置您的路由器:

{
    path: 'r1', 
    component: 'appComponent',
    children: [
        { path: '', component: contentr12Component, outlet: 'content1_r1_r2' },
        { path: '', component: contentr1Component, outlet: 'content2' }
    ]
}
// write same for r2 just change content1Component you want to load on /r2 route.

{
    path: 'r3',
    component: 'appComponent',
    children: [
        { path: '', component: contentr34Component, outlet: 'content1_r2_r4' },
        { path: '', component: contentr3Component, outlet: 'content2' }
    ]
}

// write same for r4 just change content3Component you want to load on /r4 route.

在上面的代码中，r1 和 r2 路由的 contentr12Component 将保持不变，r3 和 r4 的 contentr34Component 将保持不变。您可以根据您的组件替换名称。

这也会避免难看的 URL。