从 JavaScript 插入 DOM 元素时，不显示 CSS 样式

Question

我想显示带有标题和内容的日志。使用以下代码，li将元素插入到右侧的 DOM 中className，但不显示样式。这是在 Angular 组件内部，我认为这可能是错误的根源。这只是一个带有 html 的基本新应用程序：<app-example></app-example>注意：如果我在 html 中手动插入一个元素，它会正确显示。我注意到的唯一区别是li从 javascript 插入的元素没有_ngcontent-cxr-c40.网页：<ul class="d-flex f-column log-list" id="log-list">        <li id="log-item" class="log-message">          <span class="log-message-title">TEST</span>        </li></ul>这是向日志添加元素的函数：  private addLogElement(title: string, message: string): void {    const newNode = document.createElement('li');    newNode.className = 'log-message';    const newNodeTitle = document.createElement('span');    newNodeTitle.className = 'log-message-title';    const headerText = document.createTextNode(title);    newNodeTitle.appendChild(headerText);    newNode.appendChild(newNodeTitle);    const parentDiv = document.getElementById('log-list');    const childDiv = document.getElementById('log-item');    parentDiv.insertBefore(newNode, childDiv);  }

Answer 1

您应该使用 Renderer2 API 进行此类 DOM 操作。

在构造函数的 Component 类中注入它，如下所示：-

constructor(public renderer: Renderer2) {}

然后将您的方法更改为：-

private addLogElement(title: string, message: string): void {

    const newNode = this.renderer.createElement('li');

    this.renderer.addClass(newNode, 'log-message');

    const newNodeTitle = this.renderer.createElement('span');

    this.renderer.addClass(newNodeTitle, 'log-message-title');

    const headerText = this.renderer.createText(title);

    this.renderer.appendChild(newNodeTitle, headerText);

    this.renderer.appendChild(newNode, newNodeTitle);

    const parentDiv = this.renderer.selectRootElement(document.getElementById('log-list'), true);

    const childDiv = this.renderer.selectRootElement(document.getElementById('log-item'), true);

    this.renderer.insertBefore(parentDiv, newNode, childDiv);

  }

您应该使用 Renderer2 而不是本机 DOM 操作还有其他原因。

您可以在此处参考这些原因：- https://medium.com/dev-genius/dont-use-native-dom-manipulations-in-angular-6c8db13f463f

Answer 2

将其添加到您的css/scss

我已添加示例样式中

:host ::ng-deep .log-message{

    color: red;

}

:host ::ng-deep .log-message-title{

    background-color: #eeee33

}