どの要素がどのように表示されているのかを角で伝えます。

Question

フェロー！

Webアプリケーション用のコンポーネント（例：表）を作成しています。テーブルコンポーネントは非表示になることがあります。つまり、コンポーネントツリーにありますが、ユーザーには表示されません。例えば：

<custom-tab> <!-- shown --> 
    <custom-table /> 
</custom-tab> 
<custom-tab> <!-- NOT shown --> 
    <custom-table /> 
</custom-tab> 

隠された（図示せず）カスタムテーブル成分負荷が、それは両方のテーブル（図示せ、図示しない）のために角度によって実行されるngOnInit法、内部データです。 テーブルに特定のngIf（タブが表示されているかどうかを評価する）を追加すると、ngOnInitメソッドは呼び出されません。コンポーネントが表示されるかどうかを決定するコンポーネントの大きな階層の非常に複雑なシナリオが存在する可能性があるため、このソリューションは非常に面倒です。 ブラウザのDOMを見ると、正しいカスタムテーブルの要素がDOMに存在しないことがわかります。 Angularはこれらのコンポーネントをとにかく初期化します（そしてngOnInitを呼び出します）。

質問：

1. 方法でコンポーネントがDOMに基本的であると（CSSを無視）に示すことができないという角度通信していますか？
2. コンポーネントが表示されていない場合、コンポーネントの読み込みを禁止し、ユーザーに表示された場合のみデータを読み込むことができますか？

ありがとう！

Answer 1

角度1の視点からは、Two Way Data Bindingで動作します。概念。これは、本質的に、同じデータがビューとモデルの両方で利用可能であることを意味します。

したがって、ng-ifまたはng-show/ng-hideのどちらを使用しても、データはモデルのビューに存在し、その逆もあります。それはちょうどCSSのプレーです（ng-show/hideの場合にDOMから削除するかどうか）

Answer 2

1）が正確に何であるかわかりません。おそらくこれがあなたの質問に答えます。

*ngIf="..."に渡される式がfalseと評価された場合、*ngIfはDOMから要素を削除し、その要素のコンポーネントも破棄されます。式がtrueと評価されると、要素が追加され、コンポーネントが再作成されます。

Angular2は、変更検出が実行されるたびに式をチェックします。

[hidden]="..."を使用すると、コンポーネントが削除されるのを防ぐことができますが、代わりに非表示にすることができます。

も参照してくださいWhat is the equivalent of ngShow and ngHide in Angular2?

2）彼らはDOMに追加されていない場合は、データをロードしないコンポーネント。たとえば、*ngIf="evaluatesToFalse"が要素に追加されているとします。 Angularは、コンポーネントが表示されているかどうかわかりません。