结构指令 - 找到它所在的元素

Question

使用结构指令，我如何获得指令所在的（本机）元素？ 使用普通指令，ElementRef 有它的 nativeElement 指向它 - 例如：

<input type="text" example>

@Directive({
  selector: '[example]'
})
export class ExampleDirective {    

  constructor( private el: ElementRef) {}

  ngAfterViewInit() {
    console.log(this.el.nativeElement); // the input
  }
}

但是使用结构指令，它指向模板注释 - 例如。

<input type="text" *example>

@Directive({
  selector: '[example]'
})
export class ExampleDirective {

  constructor(
    private el: ElementRef,
    private view: ViewContainerRef,
    private template: TemplateRef<any>
  ) {}

  ngAfterViewInit() {
    this.view.createEmbeddedView(this.template);

    console.log(this.el.nativeElement); // template bindings comment
    // how to find the input itself?
  }
}

我尝试过使用 ViewContainerRef、TemplateRef、@ContentChild、@ViewChild 的各种组合 - 只是似乎无法找到输入元素本身...

Answer 1

所有结构指令都添加到<ng-template> 元素。 Angular 从不向 DOM 添加 <ng-template> 元素。因此无法获取添加了结构指令的元素。

如果您使用带有* 的简写语法，则喜欢

<div *ngIf="..."></div>

角度创建

<ng-template [ngIf]="...">
  <div></div>
</ng-template>

因为<ng-template> 没有被添加，所以没有办法得到它，而且因为<div> 不是结构指令被添加到的元素，你也不能使用指令引用来获取这个元素。

Answer 2

这不漂亮，但对我有用：

this.viewContainer.get(0).rootNodes[0]

我在实现 *ngIf 指令的一个版本但带有动画时使用它：animatedIf。

Answer 3

在HTMLElement 上使用结构指令时，您将无法获得对该元素的引用，因为它尚未呈现。当您尝试在代码console.log(this.el.nativeElement); // template bindings comment 中访问它时，input text box 尚未呈现

请参阅下面的链接以了解 Angular 中的结构指令是如何工作的。 https://angular.io/guide/structural-directives#the-asterisk--prefix

所以要获取元素的引用，你可以在同一个元素上使用attribute directive 并做需要的事情。

Answer 4

基于Structural Directives Documentation（不确定它是否有效，但可能对您有所帮助）：

<input type="text" *example>


@Directive({
  selector: '[example]'
})
export class ExampleDirective {

  constructor(private viewContainer: ViewContainerRef) { }

  @Input() set example() {
    console.log(this.viewContainer.element.nativeElement.value);
  }
}