Question

我的app.component.html目前看起来很干净：

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

它呈现出类似于以下内容：

<body>
    <app-header>
        <header></header>
    </app-header>
    <router-outlet>
        [rendered content]
    </router-outlet>
    <app-footer>
        <footer></footer>
    </app-footer>
</body>

现在，我希望将<main>元素包裹在所有[rendered content]周围，例如：

<router-outlet>
    <main>
        [rendered content]
    </main>
</router-outlet>

这可能吗？

此刻，我将<router-outlet>包装在<main>中。但是感觉不太干净：^*

<app-header></app-header>
<main>
    <router-outlet></router-outlet>
</main>
<app-footer></app-footer>

…呈现为：

<main _ngcontent-c0="">
    <router-outlet _ngcontent-c0=""></router-outlet>
</main>

_{*我知道这是非常主观的。}

Answer 1

这可能吗？

不可能。

使用路由器出口注入模板的任何组件都将作为< router-outlet >的同级而不是其子级注入。

结果，以下情况将永远不会成为现实：

<router-outlet>
    <main>
        [rendered content]
    </main>
</router-outlet>

请参见下面的示例，了解路由组件如何成为同级组件：

Answer 2

您可以通过给路由器起一个名字来设置路由器出口：

<router-outlet name="main">
</router-outlet>

因此，您有一个用于大型页面的路由器出口，一个用于内部的路由器。因此，您将拥有一个包含

的页面

  <main>
    <router-outlet name="main">
    </router-outlet>
  </main>

您的应用程序组件是

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

但是说实话我完全不推荐这样做，因为它会使网址混乱因此，

 /home/(main:somePage)

这会使路由混乱，这是不值得的。之所以这样写，是因为您询问是否可以，而不是因为我赞同。

是否可以为<router-outlet>中的内容定义默认包装器？

2 个答案: