我一直在阅读一些关于 Angular 2 陷阱和避免什么的文章，其中一件事围绕着不直接访问 DOM。
我注意到Renderer非常有用，因为它包含一些可以帮助避免 DOM 陷阱的方法。但是，我注意到它不包含任何get函数，只包含set函数，例如setElementAttribute，setElementClass等。
所以我的问题很简单，你如何使用上述功能，但作为get和remove版本？例如，它们是否位于另一个类中，或者您如何使用检索属性或类？
要从 DOM 中删除属性，请提供 null 值。
要设置属性(如果需要，属性值可以是空字符串)：
myrenderer.setElementAttribute(elementRef.nativeElement, 'attributename', 'attributevalue');
要删除属性：
myrenderer.setElementAttribute(elementRef.nativeElement, 'attributename', null);
要获取元素属性值，您需要传递给setElementAttribute的nativeElement，因此您可以使用它来使用标准Javascript获取属性值：
elementRef.nativeElement.getAttribute('attributename');
Angular2 不提供任何支持来从 DOM 获取除ElementRef和事件之外的任何内容。
Angular2 的方法是维护模型中的状态并更新 DOM 以反映该状态。
如果需要从 DOM 读取数据，可以使用直接 DOM 访问或提供自定义Renderer，以提供默认Renderer中缺少的功能。
自定义呈现器示例
- Angular2 的自定义渲染器
- https://github.com/ralfstx/angular2-renderer-example/blob/master/src/custom-renderer.ts
如果有人仍然在寻找这个(就像我一样)，我将在 Angular 的原生渲染器上添加一些 David 的答案。
您在最新的角度渲染器中拥有所有这些请求的功能2
特别是如果您想从元素中完全删除属性(例如，社区组件中未通过可访问性测试的无效 aria 标签)并且不将其值设置为 null，则
renderer2.removeAttribute(elementRef.nativeElement, 'AttributeName');
编辑：您应该使用 AfterViewInit() 生命周期，如其他答案中所述，因为在进行任何自定义 DOM 更改之前必须呈现初始视图。
我不喜欢访问 Angular 中的 dom，但您可能需要访问这个用例。禁用烦人的自动完成的唯一方法似乎是添加属性"只读"并在表单加载后将其删除。
ngAfterViewInit() {
window.setTimeout(function () {
var arr: HTMLCollection = document.getElementsByClassName('form-control');
for (var i = 0; i < arr.length; i++) {
if (arr[i].hasAttribute("readonly")) {
arr[i].removeAttribute('readonly');
}
}
}, 500);
}
由于
getAttribute只是一个方法，您可以使用invokeElementMethod：
var attr = renderer.invokeElementMethod(elementRef.nativeElement, 'getAttribute', []);
如果切换到服务器端呈现(鼠标单击等事件回调除外)，则此方法将不起作用。
有效地扩展DOMRenderer意味着与浏览器实现紧密耦合，这与直接nativeElement操作相同。
似乎您根本不应该调用 getter。所以问题是为什么你需要知道属性值或类名？
您可以创建特定的指令或模板变量并将其与ViewChild/ViewChildren一起使用，或者创建适当的数据模型并与[class.name]="nameEnabled"绑定
基于@RandallTo上述答案的解决方案。
角
ngAfterViewInit() {
window.setTimeout(function () {
const arr: HTMLCollection = document.getElementsByClassName('disable-autocomplete');
for (let i = 0; i < arr.length; i++) {
arr[i].removeAttribute('readonly');
}
}, 500);
}
.HTML
<input type="text" name="username" readonly="" class="form-control disable-autocomplete"/>
.CSS
.disable-autocomplete {
background-color: #fff;
}
添加白色背景颜色意味着您不会获得闪光，因为表单加载了只读字段(默认情况下为灰色)，当删除只读属性时，这些字段会变为白色。
在我的版本中，您不需要 if 语句，因为您只在要禁用自动完成的字段上设置了readonly和.disable-autocomplete。
例如，您可能希望在电子邮件字段中允许自动完成，但在用户名字段中不允许自动完成。
要删除类，您仍然可以使用setElementClass，isBool应设置为false。有关详细信息，请参阅此链接 https://github.com/angular/angular/blob/9de76ebfa545ad0a786c63f166b2b966b996e64c/modules/%40angular/platform-browser/src/dom/dom_renderer.ts#L237