angular-universal - 使用 Angular 的 Renderer2,在使用 selectRootElement 方法时使用来自@ViewChildren 的 elementRef 是否安全(并且是公认的做法)?
问题描述
我需要在动态创建输入字段的页面上修改 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');
解决方案
推荐阅读
- reactjs - Gatsby 应用程序构建因使用窗口对象的可操作而失败
- java - Java String 到泛型类型
- cmake - add_custom_command 生成目标文件失败
- linkedin-api - LinkedIn v2 API 资料图片
- python - 如何减少这段代码的内存使用并提高其速度?
- processing - 加工 | 我的班级没有打电话给其他班级
- django - 使用 TrigramSimilarity 进行 Django Postgres 搜索
- bash - 如何在 bash 中使用 cmd 对话创建动态多选选项
- rest - Xamarin 形成 Http Web 请求
- javascript - 编写一个函数,返回一个索引和另一个索引之间的字符串子集