組件后的標簽<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>