使用子級路由器出口時如何向Angular父級添加CSS類

Question

我有這樣的結構

<!-- parent -->
<div>
  <!-- child gets injected by router -->
  <router-outlet></router-outlet>
</div>

如果路由器產生特定的子組件，我想向父div添加一個類。 我看到了一個類似的問題 ，可能是正確的答案，但是它不使用路由器，因此對我不起作用。

Answer 1

您可以將Router注入您的父組件，並使用[ngClass] 。

constructor(public router: Router) { }

然后在模板中：

<div class="container" [ngClass]="{'test' : router?.url === '/home'}">

  <router-outlet></router-outlet>
</div>

如果路由器設置為/home這將添加一個名為test的類。

您可以在這里看到它的運行情況