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

所有结构指令都添加到<template>个元素中。 Angular从不向DOM添加<template>个元素。因此，不可能将元素添加到结构指令中。

如果您使用*之类的简写语法

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

angular created

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

并且由于未添加<template>，因此无法获取它，因为<div>不是结构指令添加到您的元素，也无法使用该元素获取此元素指令参考。

Answer 2

这不太好，但对我有用：

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

我在实现*ngIf指令版本时使用了它，但使用了动画：animatedIf。

Answer 3

当在HTMLElement上使用结构指令时，您将无法获得对该元素的引用，因为它尚未呈现。当您尝试在代码input text box

中访问console.log(this.el.nativeElement); // template bindings comment时，attribute directive尚未呈现

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

因此，要获取元素的引用，可以在同一元素上使用^[a-zA-Z0-9][a-zA-Z0-9 ]*[-#.]*[a-zA-Z0-9 ]*并执行所需的操作。

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);
  }
}

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

4 个答案: