如何在角TemplateRef中添加和修改元素

Question

我创建了一个简单的角度指令，在这里我控制一个元素是否会被显示。我无法执行的是：

1. 修改使用此指令的元素的属性
2. 将html元素添加到相同的元素

​

@Directive({
  selector: '[needPermission]'
})
export class NeedPermissionDirective {
  private visible = true;

  constructor(private templateRef: TemplateRef < any > , private viewContainer: ViewContainerRef) {}

  @Input() set needPermission(permissionId: string) {
    if (this.visible === true) {
      // TODO-1: Modify an attribute for an element within the templateRef
      // TODO-2: Add an html element to the templateRef like a <div>        
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }

  })
}
}

​

Answer 1

下面是一个修改属性的示例

import { AfterViewInit, Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[imgError]'
})
export class ImgErrorDirective implements AfterViewInit {

  constructor(private _elRef: ElementRef, private _renderer: Renderer2) { }

  ngAfterViewInit(){
    try{
      this._elRef.nativeElement.childNodes[0].childNodes[0]
        .childNodes[0].childNodes[0].childNodes
        .forEach((child: any)=>{
           this._renderer.setAttribute(child.childNodes[0]
             .childNodes[0].childNodes[0], 'onerror', "this.src='assets/img/no- 
               photo.jpg'");
      });
    }catch{}
  }
}

在本例中，我循环一个包含img的childNodes列表，并修改每个列表的onerror属性。