Angular class 在使用 javascript 文字时不适用

Question

当在模板文字中添加 class 时，它不会更改元素的样式：

comp.html

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

comp.scss

.testt {
    color: red;
}

comp.ts

public tutorial: Element;
constructor() { }

ngOnInit() {

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

<h1> 不是红色

Answer 1

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

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

或将 css 添加到全局样式 sheet

Answer 2

默认情况下，组件通过向宿主元素添加包含代理 ID 的属性和 pre-processing 通过样式或 styleUrls 提供的样式规则来模拟样式的本机范围，以及将新的宿主元素属性添加到所有选择器。

所以你可以将组件封装设置为none

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation:ViewEncapsulation.None
})

或在全局样式文件中添加 class，这样 class 将影响项目中具有 class

的任何元素

style.scss

.testt {
    color: red;
}

Angular class 在使用 javascript 文字时不适用

Angular class not applied when using javascript literal

css

angular

typescript

template-literals