Question

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

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

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

Answer 1

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

设置属性（如果您愿意，属性值可以是空字符串）：

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

删除属性：

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

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

elementRef.nativeElement.getAttribute('attributename');

Answer 2

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

如果您需要从DOM中读取内容，则可以使用直接DOM访问权限或提供自定义Renderer，以提供默认Renderer中缺少的功能。

自定义渲染器的示例

Answer 3

~~由于getAttribute只是一种方法，您可以使用invokeElementMethod：~~

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

如果切换到服务器端呈现（鼠标单击等事件回调除外），此方法将无效。

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

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

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

Answer 4

如果有人仍在寻找它（像我一样），我将在Angular原生渲染器上的David's answer上加一点。

您拥有最新Angular Renderer2

中所有要求的功能

特别是如果您想从元素中完全删除属性（例如，社区组件中的无效aria标签，导致可访问性测试失败），并且不将其值设置为null，则有

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

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

Answer 5

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

Answer 6

要删除课程，您仍然可以使用setElementClass，isBool应设为false。有关详情https://github.com/angular/angular/blob/9de76ebfa545ad0a786c63f166b2b966b996e64c/modules/%40angular/platform-browser/src/dom/dom_renderer.ts#L237

，请参阅此链接

Answer 7

基于上面@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。

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

如何使用＆＃34;角度方式＆＃34;？

7 个答案: