html - Angular - 添加类的 CSS 属性未显示

Question

我将子项 div 附加到同一 Angular 组件内的另一个 div。然后我给它分配一个类(class)。 (使用类列表)它成功插入元素并向其添加类，但我的 css 类属性没有应用于它。

如果我在我的 html 代码中手动添加元素(包括类属性)，该元素会正确显示。

为什么会这样？

typescript 代码:

let parent = document.getElementById('playingfield');
        let cactus = document.createElement('div');
        cactus.classList.add('cactus');
        parent.appendChild(cactus);

手动插入div的HTML代码:

<div class="cactus"></div>

Answer 1

要将运行时 css 应用到您的 html 中，您需要使用 Angular 的 :host 特性。

在您的.css 或.scss 文件中以这种方式设置css。

:host ::ng-deep .cactus{
    // Your css hear
}