没有AUX URL的Angular 2嵌套视图

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

您可以通过使每个内容块成为一个单独的组件来创建类似的内容，并在您的应用程序路径中放置以下内容：

<header></header>
<content-1></content-1>
<router-outlet></router-outlet>
<footer></footer>

现在配置路由器，使其显示content 2特定路由的正确数据。组件还能够进行通信，因此您应该能够将相关数据传递给content-1组件（请参阅Angular 文档中的组件交互）。