css - 使用 javascript 文字时未应用 Angular 类

Question

当在模板文字中添加一个类时，它不会改变元素的样式：

comp.html

<div data-js = "tutorial" class ="center main">
    
</div>

压缩文件

.testt {
    color: red;
}

比较

public tutorial: Element;
constructor() { }

ngOnInit() {

    this.tutorial = document.querySelector("[data-js='tutorial']");
    this.tutorial.innerHTML = `
        <h1 class = "testt">
            Welcome
        </h1>
    `;
}

<h1>不是红色的

标签： cssangulartypescripttemplate-literals

Answer 1

注入的 html 不是组件的一部分，因此组件 CSS 不会影响它。采用

::ng-deep .testt {
    color: red;
}

或将 css 添加到全局样式表