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

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

Is this possible?

不可能。

任何使用路由器出口注入模板的组件都将作为 < 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>

但说实话我根本不推荐这个因为它会使 URL 变得混乱因此。

 /home/(main:somePage)

这让路由变得混乱，不值得。只是因为你问可不可以才写的，不是因为我赞同。

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

Is it possible to define a default wrapper for content in <router-outlet>?

html

angular

router-outlet