gpt4 book ai didi

angular - 如何将 "class"添加到主机元素?

转载 作者:太空狗 更新时间:2023-10-29 16:44:25 25 4
gpt4 key购买 nike

我不知道如何添加到我的组件<component></component>动态 class 属性,但在模板 html (component.html) 中。

我找到的唯一解决方案是通过“ElementRef” native 元素修改项目。做一些本应非常简单的事情,该解决方案似乎有点复杂。

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

有没有更简单的解决方案?类似于 <root [class]="..."> .... </ root>在模板里面。

最佳答案

这样您就不需要在组件外部添加 CSS:

@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 是在组件内部定义的,只有在宿主元素上设置了类 someClass 时(从外部)才应用选择器:

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

关于angular - 如何将 "class"添加到主机元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34641281/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com