構造ディレクティブ - 配置されている要素を見つける

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

しかし、構造的ディレクティブで、それはテンプレートのコメントを指す - など。私はViewContainerRef、TemplateRef、@ContentChild、@ViewChildの様々な組み合わせを使用してみました

<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? 
    } 
} 

- ちょうど入力要素自体を見つけることができるようには見えません...

Answer 1

全ての構造ディレクティブがあります<template>要素に追加されました。 Angularは、<template>要素をDOMに追加することはありません。したがって、構造ディレクティブが追加された要素を取得することはできません。

あなたは

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

を作成し、<template>が追加されていないので、そこを取得する手立てがなく、<div>ための要素ではありません*角度

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

などで速記構文を使用している場合構造ディレクティブが追加され、ディレクティブ参照を使用してこの要素を取得することもできません。 Structural Directives Documentation（それが動作するかどうか確認してください、多分あなたが助けていない）に基づいて

Answer 2

：

<input type="text" *example> 


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

    constructor(private viewContainer: ViewContainerRef) { } 

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

Answer 3

これはかなりありませんが、私の仕事：

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

私はときにそれを使用*ngIfディレクティブのバージョンを実装しましたが、アニメーションはanimatedIfです。