从 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 {&nbsp; &nbsp; const newNode = this.renderer.createElement('li');&nbsp; &nbsp; this.renderer.addClass(newNode, 'log-message');&nbsp; &nbsp; const newNodeTitle = this.renderer.createElement('span');&nbsp; &nbsp; this.renderer.addClass(newNodeTitle, 'log-message-title');&nbsp; &nbsp; const headerText = this.renderer.createText(title);&nbsp; &nbsp; this.renderer.appendChild(newNodeTitle, headerText);&nbsp; &nbsp; this.renderer.appendChild(newNode, newNodeTitle);&nbsp; &nbsp; const parentDiv = this.renderer.selectRootElement(document.getElementById('log-list'), true);&nbsp; &nbsp; const childDiv = this.renderer.selectRootElement(document.getElementById('log-item'), true);&nbsp; &nbsp; this.renderer.insertBefore(parentDiv, newNode, childDiv);&nbsp; }您应该使用 Renderer2 而不是本机 DOM 操作还有其他原因。您可以在此处参考这些原因：- https://medium.com/dev-genius/dont-use-native-dom-manipulations-in-angular-6c8db13f463f

Answer 2

将其添加到您的css/scss我已添加示例样式中:host ::ng-deep .log-message{&nbsp; &nbsp; color: red;}:host ::ng-deep .log-message-title{&nbsp; &nbsp; background-color: #eeee33}