nativeElementが定義されていないのはなぜですか？

Question

私の親コンポーネントには、btnと設定メニューの指示があります。私がしようとしているのは、elementref＃navBtnをsettings-menuへの入力として渡すことです。

<div #navBtn (click)="toggleNav()" class="header__button header__button--left" id="header_button--left"> 
     <img class="align-absolute" src="assets/imgs/icon_sandwich.svg"> 
    </div> 
    <settings-menu [btn]="navBtn" [navOpened]="navOpened" (navClosed)="navOpened.next(false)"></settings-menu> 
... 
@ViewChild('navBtn') navBtn: ElementRef; 

私はイベントターゲットは/除外にoffclickにHostListenerで、この要素を含むかどうかを確認することができますので、私はこのelementrefを必要としています。

private _btn: ElementRef; 
    @Input('navOpened') navOpened: BehaviorSubject<boolean>; 
    @Input('btn') 
    set btn(val: ElementRef) { 
    this._btn = val; 
    } 

    get btn() { 
    return this._btn; 
    } 

    @HostListener('document:click', ['$event']) offClick(e: Event) { 
    e.stopPropagation(); 
    console.log('el', this.el.nativeElement, 'btn', this.btn.nativeElement, 'target', e.target); 
    if (!this.el.nativeElement.contains(e.target) || this.btn.nativeElement.contains(e.target)) this.closeNav(); 
    } 

しかしthis.btnはthis.btn上nativeElementもngAfterViewInitライフサイクルフックで、常に定義されていないので、それは、そうですBTNのhtmlとないelementRefを返します。

Answer 1

template reference variablesの周りの角のドキュメントで述べたように：ほとんどのケースで

<input #phone placeholder="phone number"> 

<!-- phone refers to the input element; pass its `value` to an event handler --> 
<button (click)="callPhone(phone.value)">Call</button> 

、角度は、それが宣言された 要素に参照変数の値を設定します。前の例では、電話 は電話番号ボックスを参照しています。電話ボタンクリックハンドラ は、入力値をコンポーネントのcallPhoneメソッドに渡します。あなたのコードで

---

あなたはsettings-menuへの入力値としてnavBtnを渡す場合、：

<settings-menu [btn]="navBtn" ...> 

btn#navBtnによって参照されるDOM要素に設定されます。 nativeElementで、あなたは、独自のコンポーネントに@ViewChild("navBtn")を持つ要素を取得した場合、その後、あなたがElementRefを取得し、一方

@Input("btn") btn: HTMLElement; 

---

：あなたはsettings-menuコンポーネントでのHTMLElementようbtn変数を定義することができますDOM要素をポイントするプロパティ。