使用子级路由器出口时如何向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的类。

您可以在这里看到它的运行情况