角2構造体のディレクティブがイベントを登録していない

Question

私は、ウィンドウのサイズ変更時にDOM内の要素を追加または削除する構造ディレクティブを作成しています。問題は、ウィンドウの幅が設定したカットオフ値よりも大きい場合でも、ディレクティブが要素を描画しないことです。私はディレクティブをデバッグしようとしましたが、私はwindow:resizeイベントのイベントハンドラ内にブレークポイントを打つことはありません。

window:resizeの別のイベントハンドラを、私のコンポーネントで同じメソッドを使用して配置し、ハンドラを問題なく実行します（コンポーネントのもの）。

MY-構造-directive.ts：

import{ 
    Directive, 
    Input, 
    TemplateRef, 
    ViewContainerRef} from "@angular/core"; 

@Directive({ 
    selector: "[visAboveWidth]", 
    host : { 
     "(window:resize)" : "onResize($event)" 
    } 
}) 
export class VisibleAboveWidthDirective{ 
    private _defaultWidth : number = 786; 
    private _visibleAbove : number; 

    constructor(private _templateRef: TemplateRef<any>, private _viewContainer: ViewContainerRef){ 

    } 

    @Input() set visAboveWidth(width: number){ 
     this._visibleAbove = width; 
    } 

    onResize(event: Event){ 
     var window : any = event.target; 
     var currentWidth = window.innerWidth; 

     if(currentWidth < (this._visibleAbove || this._defaultWidth)){ 
      this._viewContainer.clear(); 
     } 
     else{ 
      this._viewContainer.createEmbeddedView(this._templateRef); 
     } 
    } 
} 

MY-HTML-file.html：

 <!-- Bunch of divs--> 
    <thead> 
      <tr> 
       <th>Group</th> 
       <th>Type</th> 
       <th>Box</th> 
       <th>Position</th> 
       <th>Volume</th> 
      <!-- First instance of the directive --> 
       <th *visAboveWidth="786"></th> 
      <!-- First instance of the directive --> 
      </tr> 
     </thead> 
     <tbody> 
      <tr *ngFor="let sample of samples"> 
       <td class="vert-align">{{sample.group}}</td> 
       <td class="vert-align">{{sample.type}}</td> 
       <td class="vert-align">{{sample.box}}</td> 
       <td class="vert-align">{{sample.position}}</td> 
       <td class="vert-align">{{sample.volume}}</td> 

      <!-- Second instance of the directive --> 
       <td class="vert-align" *visAboveWidth="786"> 
      <!-- Second instance of the directive --> 

        <div class="btn-group" dropdown > 
         <button class="btn btn-default">Details</button> 
         <button class="btn btn-default" dropdownToggle> 
          <span class="caret"></span> 
          <span class="sr-only">Secondary actions</span> 
         </button> 
         <ul class="dropdown-menu" dropdownMenu> 
          <li><a class="dropdown-item">Edit</a></li> 
          <li class="divider dropdown-divider"></li> 
          <li><a class="dropdown-item">Delete</a></li> 
         </ul> 
        </div> 
       </td> 
      </tr> 
     </tbody> 

取り付けディレクティブを持つ要素は成分示されていないどちらレンダリングする。まず

私は構造的なディレクティブはViewContainerをクリアしてしまうため、それは私が代わりにこのアプローチを試みたと思った：

私-構造-directive.ts

//Rest is the same 
    constructor(private _elementRef : ElementRef) 
    onResize(event: Event){ 
     var window : any = event.target; 
     var currentWidth = window.innerWidth; 

     if(currentWidth < (this._visibleAbove || this._defaultWidth)){ 
      this._elementRef.nativeElement.style.display = "none" 
     } 
     else{ 
      this._elementRef.nativeElement.style.display = "block" 
     } 
    } 

しかし、これはしませんがいずれかの作業。私はここに何かを逃していますか

Answer 1

私はそれを解決することができました。 構造指令がどのように機能するのか誤解されていたはずです。 ViewContainerとTemplateRefへの参照を削除し、ElementRefを使用すると、それが動作し始めました。それは私がそれについて考えていると思います。

私を次のように私のディレクティブを変更： 私-directive.ts

import{ 
    Directive, 
    Input, 
    ElementRef, 
    HostBinding 
    } from "@angular/core"; 



@Directive({ 
    selector: "[visAboveWidth]", 
    host : { 
     "(window:resize)" : "onResize($event)" 
    } 
}) 
export class VisibleAboveWidthDirective{ 
    private _defaultWidth : number = 786; 
    private _visibleAbove : number; 
    constructor(private _elementRef: ElementRef){ 

    } 

    @Input("visAboveWidth") set visAboveWidth(width: number){ 
     console.log("Set value"); 
     this._visibleAbove = width; 
    } 

    @HostBinding("class.visibility-hide") 
    private _hide : boolean = false; 

    onResize(event: Event){ 
     var window : any = event.target; 
     var currentWidth = window.innerWidth; 

     this._hide = currentWidth < (this._visibleAbove || this._defaultWidth); 
    } 
} 

新しいディレクティブの構文は

visAboveWidth="786" 

された状態で代わりにアスタリスクの

私はまた、 .visibility-hideクラスを私のスタイルシートに追加しました：

.visibility-hide{ 
    display: none; 
}