Angular2ネストされた可視性

Question

私はタブを表示し、可視性を使用してアクティブなコンテンツのみを表示する再帰的なコンポーネントを実装しています。タブの内容は生成するのに費用がかかり、DOMの観点からレイアウトするため、この方法を選択します。

based on this私はタブを非表示にすると、ネストされた子タブは引き続き表示されます。

私はこれを処理するための最良の方法は、CSSクラスのセットを作成することであると考えています：

1. P-見える
2. P-可視隠さ

この道を、私はタブが非表示に設定されているときにDOM要素を介して再帰的に処理し、p-visibleクラスを持つ要素をp-visible-hiddenクラスに変更することができます。同様に、タブがvisibleに設定されている場合、p-visible-hiddenクラスを持つすべての要素をp-visibleに切り替えることができます。

だから私はAngular2でこれを実装するための最良の方法思ったんだけど - 私には、おそらく最良の方法を、実際に子DOM要素を選択するようにします。任意の助けを事前に

感謝:)

test harness for component

tab layout component

Answer 1

私は親が表示されている場合を示している（parentVisibleと呼ばれる）@Inputのブール値を作成することで問題を解決することができましたまたは隠されています。このプロパティは、コンポーネントの再帰的階層を介してカスケードされます。

parentVisibleブールは、それぞれの子要素の可視性を（parentVisibleがfalseの場合、可視性は、隠さに設定されているparentVisibleがtrueの場合、以前のように可視性を設定する）

は、この戦略は、それを作るの設定に追加のフィルタですユニットテストとAngular2の方法で物事を行うための優れたものとみなされ、直接DOM操作を回避することが可能に：笑顔：