Question

我需要根据当前组件注入css类。即：如果我目前在LoginComponent上，我需要将from django.db import models class Lista (models.Model): num_lista_1 = models.CharField(max_length=100, null=True) num_lista_2 = models.CharField(max_length=100, null=True) def __unicode__(self): return self.num_lista_1类注入login（我应用程序的更大父级）。像这样：

app.component.html

我不知道处理这个问题的最佳做法是什么。我也可以在网址上注入注入。即：如果url是xxx./login，则注入<div class="content login"> <router-outlet></router-outlet> </div> 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>

Voilà！

编辑如果要将类应用于父组件，则在ClassNamer中添加一个Output，它将className发送给父组件（但请记住，路由器插座不是' “父母”本身）

获取Angular 5中的当前组件

2 个答案: