Angular使用createElement与选择器的解决方法如下:
import { Component, OnInit, ElementRef, Renderer2 } from '@angular/core';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent implements OnInit {
constructor(private elRef: ElementRef, private renderer: Renderer2) {}
ngOnInit() {
// 创建一个新的div元素
const newDiv = this.renderer.createElement('div');
// 设置新div的内容
const text = this.renderer.createText('This is a new div');
this.renderer.appendChild(newDiv, text);
// 将新div添加到指定的容器中
const container = this.elRef.nativeElement.querySelector('#container');
this.renderer.appendChild(container, newDiv);
}
}
import { Component, ElementRef, Renderer2 } from '@angular/core';
@Component({
selector: 'app-root',
template: `
This is a paragraph
`
})
export class AppComponent {
constructor(private elRef: ElementRef, private renderer: Renderer2) {}
ngAfterViewInit() {
// 通过选择器选取元素
const paragraph = this.elRef.nativeElement.querySelector('#paragraph');
// 修改选取元素的样式
this.renderer.setStyle(paragraph, 'color', 'red');
// 修改选取元素的内容
this.renderer.setProperty(paragraph, 'textContent', 'This is a modified paragraph');
}
}
以上示例中,我们使用了ElementRef和Renderer2来获取DOM元素和进行DOM操作。第一个示例展示了如何创建一个新的div元素并将其添加到DOM中的指定容器中。第二个示例展示了如何通过选择器选取元素并进行样式和内容的修改。