我需要在动态创建输入字段的页面上修改 DOM。
我使用 @viewChildren 将这些 elementRefs 拉入一个数组。我一直在阅读使用 elementRefs 是一个坏主意。我不使用它们来修改 DOM,但我确实使用它们来允许 renderer2 修改 DOM。
IE
@ViewChildren('score') scores: QueryList<ElementRef>;
score 是分配给@viewChildren 的变量。
let nextField: ElementRef;
if (i < this.scores.length) {
nextField = this.scores.get(i);
this.renderer.selectRootElement(nextField.nativeElement).focus();
this.renderer.selectRootElement(nextField.nativeElement).select();
}
这段代码有问题吗?
我想知道其他一些示例是否会导致可移植性或服务器端渲染问题.....
1)
const currentField = new ElementRef(event.target);
const index = this.scores.toArray().findIndex(el => el.nativeElement.name === currentField.nativeElement.name);
let fieldValue = this.scores.get(index).nativeElement.value
(再次分数是我分配给@viewChildren的变量)
3)
const currentValue = this.renderer.selectRootElement(currentField.nativeElement).value
currentField 只是一个 ElementRef。
4)。使用 Renderer2,所有这些方法都可以接受设置值的方法吗?
this.renderer.selectRootElement(currentField.nativeElement).value = 'x';
this.renderer.setValue(currentField.nativeElement, 'x');
this.renderer.setProperty(currentField.nativeElement, 'value', 'x');