如何使用“角度方式”获取/设置/删除Angular 2中的元素属性?

问题描述 投票:11回答:7

我一直在阅读一些关于Angular 2陷阱的文章以及要避免的内容,其中一个问题围绕着不直接访问DOM。

我注意到Renderer非常有用,因为它包含一些可以帮助避免DOM陷阱的方法。但是,我注意到它不包含任何get函数,只有set函数,如setElementAttributesetElementClass等。

所以我的问题很简单,你如何使用上述功能,但作为getremove版本?他们是否住在另一个班级或者您如何使用例如检索属性或类?

angular
7个回答
8
投票

除了ElementRef和事件之外,Angular2不提供从DOM获取任何内容的任何支持。 Angular2方法是维护模型中的状态并更新DOM以反映该状态。

如果您需要从DOM中读取,您可以使用直接DOM访问或提供自定义Renderer,它提供您在默认Renderer中缺少的功能。

自定义渲染器的示例


17
投票

要从DOM中删除属性,请提供null值。

设置属性(如果需要,属性值可以是空字符串):

myrenderer.setElementAttribute(elementRef.nativeElement, 'attributename', 'attributevalue');

要删除属性:

myrenderer.setElementAttribute(elementRef.nativeElement, 'attributename', null);

要获取元素属性值,您需要传递给setElementAttribute的nativeElement,因此您可以使用它来使用标准Javascript获取属性值:

elementRef.nativeElement.getAttribute('attributename');

2
投票

由于getAttribute只是一种方法,你可以使用invokeElementMethod

var attr = renderer.invokeElementMethod(elementRef.nativeElement, 'getAttribute', []);

如果切换到服务器端呈现(鼠标单击等事件回调除外),此方法将不起作用。

有效地扩展DOMRenderer意味着与浏览器实现的紧密耦合,这与直接nativeElement操作相同。


看来你根本不应该调用吸气剂。所以问题是为什么你需要知道属性值或类名?

您可以创建特定的指令或模板变量,并将其与ViewChild / ViewChildren一起使用,或创建适当的数据模型并与[class.name]="nameEnabled"绑定


2
投票

如果有人还在寻找这个(就像我一样),我会在David's answer上加一点,这是在Angular的原生渲染器上。

您在最新的Angular Renderer2中拥有所有这些请求的功能

特别是如果你想从元素中完全删除属性(例如社区组件中无效的可访问性测试中的无效咏叹调标签)并且不将它们的值设置为null,那么

renderer2.removeAttribute(elementRef.nativeElement, 'AttributeName');

编辑:您应该使用AfterViewInit()生命周期,如其他答案中所述,因为必须在进行任何自定义DOM更改之前呈现初始视图。


1
投票

我不喜欢在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);
}

0
投票

要删除一个类,你仍然可以使用setElementClassisBool应该设置为false。有关更多信息,请访问此链接https://github.com/angular/angular/blob/9de76ebfa545ad0a786c63f166b2b966b996e64c/modules/%40angular/platform-browser/src/dom/dom_renderer.ts#L237


0
投票

解决方案基于@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

例如,您可能希望在电子邮件字段中允许自动填充,但不允许在用户名字段中。

© www.soinside.com 2019 - 2024. All rights reserved.