如何将“类”添加到宿主元素?

我不知道如何在模板 html (component.html)中添加<component></component>动态

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

另一个问题是 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();

}

}

这个 CSS 是在组件内部定义的,只有当类someClass被设置在宿主元素上时(从外部)才应用选择器:

:host(.someClass) {

background-color: red;

}

以上是 如何将“类”添加到宿主元素? 的全部内容, 来源链接: www.h5w3.com/z/755937.html

回到顶部