<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>