独自の* ngIfの実装

Question

独自の* ngIfディレクティブを作成したいと思います。ディレクティブは数値を取得し、スクリーンの内部幅ピクセルがそれ以下の場合はテンプレートをレンダリングしません。

自分の* ngIfはどのように実装できますか？

Answer 1

それは構造的ディレクティブと呼ばれていますを設定することで、いくつかの要素を非表示するかどうかを決めるだろうウィンドウ幅イベントと幅を見に耳を傾けコンポーネント内でイベントリスナーを作成することです。

あなたはそのhttps://angular.io/guide/structural-directives

主要部分についての角ドキュメント内のセクションもありsource of *ngIf

をチェックしたテンプレートをスタンプすることができます

this.viewContainer.createEmbeddedView(this.templateRef); 

であることができます。

あなたは

<my-component *myIf="isTrueOrFalse"></my-component> 

*が、その後/削除刻印することができディレクティブにテンプレートとして渡される

<my-component></my-component> 

になります持っている場合。

Answer 2

これはかなり簡単です。

この*ngIf='someVariable'のように、ngIf古き良きを使用し、あなたはそれがレンダリングされたりしませ取得したいときにちょうどtrueからfalseにこのsomeVariableを切り替えます。私はどうなるのか

は、someVariable