Angular 4でテンプレートから作成したコンポーネントを再注入する方法

Question

私はAngular 4を使用してアプリケーションを作成しています。カスタム構造指示を使用してDOM要素を削除して再挿入したいと思います。

カスタム構造ディレクティブのテンプレートは、次のようになります。

<div class="header-nav" *showIn="'xs'"> 
     <a class="nav-link nav-icon" 
      [class.active]="isSearchFormOpen | async" 
      (click)="toggleSearchForm()"> 
      <clr-icon 
       [attr.shape]="(isSearchFormOpen | async) ? 'zoom-out' : 'zoom-in'"> 
      </clr-icon> 
     </a> 
    </div> 

'showIn'構造指示文は、以下を行います。

@Input() set showIn(target: string) { 
    console.log(this.templateRef); 
    this.breakPoint.subscribe((breakPoint) => { 
     if (target === breakPoint) { 
      this.viewContainer.createEmbeddedView(this.templateRef); 
     } else { 
      this.viewContainer.remove(); 
     } 
    }) 
}; 

「ブレークポイントは、」の値がウィンドウのサイズが変更されるたびに返され、この値は指令の入力値と一致するかどうかに応じて、私はDOM要素を注入または取り出したいです。

問題は、要素がビューから削除された後に再度挿入され、属性バインディングなしで 'clr-icon'要素が挿入されたときに発生します（ '[attr.shape] = "（isSearchFormOpen | async）？ 'zoom-out'： 'zoom-in' "）、要素自体が見えなくなります。この属性バインディングが開始するウィンドウ内を明示的にクリックした後で、要素を再び表示することができます。

属性バインディングのすべてを失うことなくDOM要素を再挿入するにはどうすればよいですか？

Answer 1

埋め込みビューを作成し、それへの参照を保存する必要があります。次に、それを挿入または取り外します。このような何か：

view = this.templateRef.createEmbeddedView(null); 

@Input() set showIn(target: string) { 
    console.log(this.templateRef); 
    this.breakPoint.subscribe((breakPoint) => { 
     if (target === breakPoint) { 
      this.viewContainer.insert(this.view); 
     } else { 
      this.viewContainer.detach(); 
     } 
    }) 
}; 

単純に添付されているため、/の代わりにビューを作成し、破壊のホストDOMノードへのビューのDOMノードを削除/破壊するたびにDOMがために、関連するノード作成このソリューションは、はるかにパフォーマンスです景色。