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