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

我一直在读一些关于Angular 2陷阱和应避免的问题的文章，其中一个问题是不直接访问DOM

我注意到，

呈现程序

非常有用，因为它包含一些可以帮助避免DOM陷阱的方法。但是，我注意到它不包含任何

get

函数，只包含

set

函数，例如

setElementAttribute

，

setElementClass

等等

---

所以我的问题很简单，除了

get

和

remove

版本之外，如何使用上述函数？他们是否生活在另一个类中，或者您如何检索属性或类（例如？

Angular2不提供任何支持来从DOM获取任何内容，除了

ElementRef

和事件。
Angular2方法是维护模型中的状态，并更新DOM以反映该状态

如果需要从DOM读取，可以使用直接DOM访问或提供自定义

Renderer

提供默认

渲染器中缺少的功能

自定义渲染器示例




因为
getAttribute
只是一个方法，所以可以使用
invokeElementMethod
：

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

如果切换到服务器端渲染（鼠标单击之类的事件回调除外），这种方法将不起作用

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


看起来您根本不应该调用getter。所以问题是为什么需要知道属性值或类名

您可以创建特定的指令或模板变量，并将其与
ViewChild
/
ViewChildren
一起使用，或者创建适当的数据模型并与
[class.name]=“namenabled”
绑定要删除类，您仍然可以使用
setElementClass
，
isBool
应设置为
false
。有关详细信息，请参见此链接。要从DOM中删除属性，请提供null值

要设置属性（如果愿意，属性值可以是空字符串），请执行以下操作：

要删除属性，请执行以下操作：

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

要获取元素属性值，您需要将nativeElement传递给setElementAttribute，因此可以使用它使用标准Javascript获取属性值：

elementRef.nativeElement.getAttribute('attributename');

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

ngAfterViewInit（）{
setTimeout（函数（）{
var arr:HTMLCollection=document.getElementsByClassName（'form-control'）；
对于（变量i=0；i
如果有人还在找这个（就像我做的那样），我将在Angular的本机渲染器上添加一些内容

您在最新版本中拥有所有这些请求的功能

特别是如果您希望从元素中完全删除属性（例如，社区组件中未通过可访问性测试的无效aria标记），并且不将其值设置为null，那么

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

编辑：您应该使用AfterViewInit（）生命周期，如其他答案中所述，因为在进行任何自定义DOM更改之前必须呈现初始视图。
基于上述@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);
}

添加白色背景色意味着当窗体加载只读字段（默认情况下为灰色）时，不会出现闪烁，当删除只读属性时，这些字段将变为白色

在我的版本中，您不需要if语句，因为您只在要禁用自动完成的字段上设置了
readonly
和
.disable autocomplete

例如，您可能希望在电子邮件字段中允许自动完成，但在用户名字段中不允许自动完成。
是否有扩展渲染器的方法？那是个好主意吗？或者创建一个完全定制的渲染器会更好吗？我还没有仔细查看
渲染器
，但是我非常确定扩展是个好主意。好的，我会看一看。但是有一种情况我想知道正确的方法是什么，假设我有一个函数，它接收一个
$event
作为参数。然后我使用
$event.target.getAttribute（'some-attr'）
从目标元素获取属性。当无法访问目标的
nativeElement
时，这是正确的方法吗？值得注意的是，我首先使用
Renderer
绑定了事件侦听器本身，这就是事件的来源。我不确定。这也是IMHO直接访问DOM的方法，通常不鼓励直接访问DOM，但在事件中也可以。如果您有兴趣创建一个具有新的get/remove属性类的示例，我可以奖励您奖金。嗯，我很感兴趣。我明天会试试看是否行得通。它将解决我与Gunter讨论的事件目标操纵问题。那么
classList
和其他类似属性呢？
classList
可以使用
class
属性进行模拟。是的，我不知道你为什么要这样做。如果您的DOM元素需要使用DOM attr/data设置/获取的特殊状态，那么可能是一种边缘情况，您需要为其创建一个自定义指令。我也想到了这一点，但
invokeElementMethod
没有返回任何内容（自问题创建以来，我自己没有检查）.你为什么要使用ngOnInit并设定一个暂停时间？你可以用另一个有角度的Lyfecycle钩，比如ngDoCheck f
ngAfterViewInit() {
      window.setTimeout(function () {

         const arr: HTMLCollection = document.getElementsByClassName('disable-autocomplete');
         for (let i = 0; i < arr.length; i++) {
             arr[i].removeAttribute('readonly');
         }

   }, 500);
}

<input type="text" name="username" readonly="" class="form-control disable-autocomplete"/>

.disable-autocomplete {
  background-color: #fff;
}