Question

我不知道如何在模板html（component.html）中添加动态类属性<component></component>。

我找到的唯一解决方案是通过＆＃34; ElementRef＆＃34;修改项目。本土元素。做一些应该非常简单的事情，这个解决方案似乎有点复杂。

另一个问题是必须在组件范围之外定义CSS，从而破坏组件封装。

有更简单的解决方案吗？像模板中的<root [class]="..."> .... </ root>之类的东西。

Answer 1

@Component({
   selector: 'body',
   template: 'app-element',
   // prefer decorators (see below)
   // host:     {'[class.someClass]':'someField'}
})
export class App implements OnInit {
  constructor(private cdRef:ChangeDetectorRef) {}

  someField: boolean = false;
  // alternatively also the host parameter in the @Component()` decorator can be used
  @HostBinding('class.someClass') someField: boolean = false;

  ngOnInit() {
    this.someField = true; // set class `someClass` on `<body>`
    //this.cdRef.detectChanges(); 
  }
}

Plunker example

这样您就不需要在组件外部添加CSS。 CSS喜欢

:host(.someClass) {
  background-color: red;
}

从组件内部开始工作，只有在主机元素上设置了类someClass时才应用选择器。

Answer 2

此答案中建议的技术已弃用，Angular开发人员不应再使用该技术。有关支持的选项，请参阅上一个答案。

Günter的答案很棒（问题是要求动态类属性），但我认为我只是为了完整而添加......

如果您正在寻找一种快速而简洁的方法来将一个或多个静态类添加到组件的主机元素中（例如，出于主题样式目的），您可以这样做：< / p>

@Component({
   selector: 'my-component',
   template: 'app-element',
   host: {'class': 'someClass1'}
})
export class App implements OnInit {
...
}

如果你在entry标签上使用一个类，Angular将合并这些类，即

<my-component class="someClass2">
  I have both someClass1 & someClass2 applied to me
</my-component>

Answer 3

如果要将动态类添加到宿主元素，则可以将HostBinding与吸气剂组合为

@HostBinding('class') get class() {
    return aComponentVariable
}

https://stackblitz.com/edit/angular-dynamic-hostbinding上的Stackblitz演示

Answer 4

您只需在{em> @Component 类中添加@HostBinding('class') class = 'someClass';。

示例：

@Component({
   selector: 'body',
   template: 'app-element'       
})
export class App implements OnInit {

  @HostBinding('class') class = 'someClass';

  constructor() {}      

  ngOnInit() {}
}

Answer 5

另一个问题是，必须在组件范围之外定义CSS，这会破坏组件封装

这不是事实。使用scss（SASS），您可以轻松地为组件（本身；主机）设置样式，如下所示：

:host {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    visibility: hidden;

    &.someClass {
        visibility: visible;
    }
}

这种封装是“不间断的”。

Answer 6

这是我的做法（角度7）：

在组件中，添加输入：

@Input() componentClass: string = '';

然后在组件的HTML模板中添加以下内容：

<div [ngClass]="componentClass">...</div>

最后在实例化该组件的HTML模板中：

<root componentClass="someclass someotherclass">...</root>

免责声明：我对Angular还是很陌生，所以我可能在这里很幸运！

Answer 7

除了@JoshuaDavid 的回答之外，还有另一种定义静态类的方法，它在我尝试时适用于 angular v8（可能也适用于旧版本）：

@Component({
selector: "my-component.someClass1.someClass2",
...
})

将生成以下输出：

<my-component class="someClass1 someClass2">
 ...
</my-component>

你也可以这样使用：

@Component({
selector: ".someClass1.someClass2",
...
})

将生成以下输出：

<div class="someClass1 someClass2">
 ...
</div>

Answer 8

对于多类情况，如上述@jbojcic，可以使用：

主持人：{class：'A B C'}

如何添加＆＃34; class＆＃34;托管元素？

8 个答案: