Структурная директива - поиск элемента, на который он помещен

Со структурной директивой, как бы я мог удержать элемент (native), на который включена директива? С обычной директивой 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 - просто кажется, что не может найти сам элемент ввода...

Ответ 1

Все структурные директивы добавляются в элементы <template>. Угловой никогда не добавляет элементы <template> в DOM. Поэтому невозможно получить элемент, к которому добавлена структурная директива.

Если вы используете сокращенный синтаксис с * like

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

угловое создает

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

и поскольку <template> не добавляется, нет способа получить его, и поскольку <div> не является элементом, добавленным к вам, также не может получить этот элемент с помощью ссылки на директиву.

Ответ 2

Это не очень, но работал на меня:

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

Я использовал его при реализации версии директивы *ngIf но с анимацией: animatedIf.

Ответ 3

Когда структурная директива используется в HTMLElement, вы не получите ссылку на этот элемент, поскольку она пока не отображается. input text box пока не отображается, когда вы пытаетесь получить к нему доступ в вашем коде console.log(this.el.nativeElement);//template bindings comment console.log(this.el.nativeElement);//template bindings comment

Пожалуйста, перейдите по ссылке ниже, чтобы узнать, как структурные директивы в Угловой работе. https://angular.io/guide/structural-directives#the-asterisk--prefix

Таким образом, чтобы получить ссылку на элемент, вы можете использовать attribute directive на одном элементе и делать необходимые вещи.

Ответ 4

Основываясь на документации по структурным директивам (не уверен, что она работает, но, может быть, поможет вам):

<input type="text" *example>


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

  constructor(private viewContainer: ViewContainerRef) { }

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