Question

我知道不建议使用替换elementRef.nativeElement，建议将iT替换为某些ViewChild标签或某种类型的标签。我想知道当我有一般类型的原生元素时，我如何使用这些标签来取代它的使用。我需要访问未知类型的常规元素的id：

elmentRef.nativeElement.id

我的相关package.json：

"@angular/common": "4.2.5",
"@angular/compiler": "4.2.5",
"@angular/core": "4.2.5"

我正在尝试替换这个代码，这个代码是我库上其他人的父代，因为我得到了：

import { ElementRef } from '@angular/core';

export abstract class IdentityComponent {
    id = '';

    constructor(protected el: ElementRef) {
        if (el) {
            this.id = el.nativeElement.id;
        }
    }
}

Answer 1

我做了一些研究，最后得到了答案，通过渲染器访问elementRef是角度2/4的更好方法。

Angular 2渲染器允许您安全地使用模板中创建的元素，无论您正在使用哪个平台。重要的是要记住，您的组件可以在ServiceWorker或其他平台中轻松使用，因此您应始终依赖渲染器来保护您的DOM访问安全。

使用ElementRef不会直接降低您网站的安全性。 Angular团队只是说“嘿，你可以使用它，只要小心它”。

如果您只使用ElementRef来获取信息，例如在您的示例中获得一定宽度，则根本不存在安全风险。当您使用ElementRef修改DOM时，情况就不同了。在那里，可能会出现潜在威胁。这样的例子可能是：

@ViewChild('myIdentifier')
myIdentifier: ElementRef

ngAfterViewInit() {
  this.myIdentifier.nativeElement.onclick = someFunctionDefinedBySomeUser;
}

这个问题是它直接插入到DOM中，跳过了角度消毒机制。什么是卫生处理机制？通常，如果通过Angular更改DOM中的某些内容，Angular会确保它没有任何危险。但是，当使用ElementRef将某些内容插入DOM时，Angular无法保证这一点。所以当使用ElementRef时，没有什么不好的东西进入DOM是你的责任。这里一个重要的关键字是XSS（跨站点脚本）。

总结一下：如果您在DOM中查询信息，那么您就是安全的。如果使用ElementRef修改DOM，请确保修改不可能包含恶意代码。

如果有帮助，请告诉我

Answer 2

而不是想知道如何替换elementRef的使用，你应该首先考虑为什么这是必要的。我们需要理解为什么你或者以前的程序员需要元素的ID，以及他们用它做什么。一般来说，在Angular中几乎不需要处理ID。通常存在基于ID的逻辑表明某种设计反模式，经常做类似jQuery的DOM操作。

顺便说一下，以这种方式使用继承将一些逻辑混合到组件中也是不好的做法。

elementRef.nativeElement.id的替代方案

2 个答案: