2 回答

TA貢獻1831條經驗 獲得超10個贊
您應該使用 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

TA貢獻1828條經驗 獲得超6個贊
將其添加到您的css/scss
我已添加示例樣式中
:host ::ng-deep .log-message{
color: red;
}
:host ::ng-deep .log-message-title{
background-color: #eeee33
}
添加回答
舉報