获取Angular 5中的当前组件

Question

我需要基于当前组件注入css类。 即：如果我当前正在使用LoginComponent，则需要将login类注入app.component.html （我的应用程序的较大父级）。 像这样：

<div class="content login">
    <router-outlet></router-outlet>
</div>

我不知道最佳做法是什么。 我还可以基于url进行注入。 即：如果url为xxx./login，则注入login CSS类。

有任何想法吗？

谢谢。

Answer 1

<router-outlet>提供一些事件，例如

<router-outlet (activate)="currentComponent = $event"></router-outlet>

另请参阅https://angular.io/api/router/RouterOutlet

Answer 2

首先，像这样用吸气剂做一个母亲班

export class ClassNamer {
  get className() { return this.constructor.name.toLowerCase().replace('component', ''); }
}

这将以小写形式返回类名，而不包含component字。

在课堂上，你必须做

export class LoginComponent extends ClassNamer { ... }

现在，在您的HTML中，您要做的就是

<div class="{{className}}"></div>

瞧！

编辑如果你想将类应用到父组件，然后在您的ClassNamer，添加输出，发出一个className到父（但请记住，路由器的出口是不是一个“父” 本身 ）