组件后的标签<router-outlet>

Question

partial1.html

<div class="content">test test</div>

main.html中

<div class="main">
   <router-outlet></router-outlet>
</div>

让我们说从main.html ，路由到partial1.html 。 而在运行时，html将如下所示：

<div class="main">
   <router-outlet></router-outlet>
   <partial1>
     <div class="content">test test</div>
   </partial>
</div>

有什么办法可以删除多余的标签？ 可能的话，合并标签。 不中断Angular路由器。

另外，我不想破坏CSS。 这个很重要。

.main > .content {}

Answer 1

我有自己的解决方案。

partial1.html

<div class="content">test test</div>

main.html中

<router-outlet></router-outlet>

@Component({
selector: ".main", //instead of 'partial1'
templateUrl: "./partial1.html",
encapsulation: ViewEncapsulation.None,
})

我得到了需要的结果。

<router-outlet></router-outlet>
<div class="main">
   <div class="content">test test</div>
</div>