Angular2嵌套可见性

我正在实现一个递归组件，该组件显示选项卡并使用可见性来仅显示活动内容。我选择这种方法是因为从DOM角度来看，标签内容的生成和布局非常昂贵。Angular2嵌套可见性

based on this，我看到，当我隐藏一个选项卡时，嵌套的子选项卡仍然可见。

我想，最好的方式来处理，这是通过创建一组CSS类：

对可见光
对可见隐藏

这样，我可以在选项卡设置为隐藏时通过DOM元素进行递归，并将具有p-visible类的元素更改为具有p-visible-hidden类。同样，当选项卡设置为可见时，我可以将具有p-visible-hidden类的所有元素切换为p-visible。

所以我想知道在Angular2中实现这一点的最好方法 - 对我来说，最好的方法也许是实际选择子DOM元素。

预先感谢任何帮助:)

test harness for component

tab layout component

来源

2016-11-13 Datum Geek

哦，组件相当甜美。它找到位于其他外部Web服务器上的远程模块，编译模块，抓取组件工厂，并在组件组件 [p-compose组件]（https://github.com/）中创建组件的实例datumgeek /绘图机壳angular2 /斑点/主/ SRC /撰写/ compose.component.ts） –

我通过，如果父母是可见的创建@input布尔（称为parentVisible），指示要解决的问题或隐藏。该属性通过组件的递归层次结构级联。

的parentVisible布尔是设定各子元素的可见性（如果parentVisible是假的，可见性设置为隐藏，如果parentVisible为真，则如之前设置可见性）

这种策略使得它额外的过滤器尽可能避免直接的DOM操作，这对于单元测试和Angular2方式的处理非常有用：smile：

来源

2016-11-15 12:17:55

Angular2嵌套可见性

回答

相关问题