要解决“Angular样式未应用于由renderer2创建的元素”的问题,你可以使用renderer2.setStyle()
方法来设置元素的样式。下面是一个示例代码:
import { Component, ElementRef, Renderer2 } from '@angular/core';
@Component({
selector: 'app-example',
template: `
`,
})
export class ExampleComponent {
constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
createElement() {
// 创建一个div元素并设置样式
const div = this.renderer.createElement('div');
this.renderer.setStyle(div, 'background-color', 'red');
this.renderer.setStyle(div, 'width', '100px');
this.renderer.setStyle(div, 'height', '100px');
// 将div元素添加到组件的宿主元素中
const hostElement = this.elementRef.nativeElement;
this.renderer.appendChild(hostElement, div);
}
}
在上面的代码中,我们首先通过renderer2.createElement()
方法创建了一个div
元素。然后,我们使用renderer2.setStyle()
方法来设置div
元素的样式,例如背景颜色、宽度和高度。最后,我们使用renderer2.appendChild()
方法将div
元素添加到组件的宿主元素中。
通过这种方式,创建的元素将应用组件定义的样式,并且可以正确显示在页面上。