gpt4 book ai didi

css - Angular2 嵌套可见性

转载 作者:行者123 更新时间:2023-11-28 04:53:12 25 4
gpt4 key购买 nike

我正在实现一个显示选项卡并使用可见性仅显示事件内容的递归组件。我之所以选择这种方法,是因为从 DOM 的 Angular 来看,选项卡内容的生成和布局成本很高。

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

我认为处理这个问题的最佳方法是创建一组 css 类:

  1. p-可见
  2. p-可见-隐藏

这样,当选项卡设置为隐藏时,我可以递归遍历 DOM 元素,并将任何具有 p-visible 类的元素更改为具有 p-visible-hidden 类。同样,当选项卡设置为可见时,我可以将所有具有 p-visible-hidden 类的元素切换为 p-visible。

所以我想知道在 Angular2 中实现它的最佳方式——对我来说,最好的方式可能是实际选择子 DOM 元素。

在此先感谢您的帮助:)

test harness for component

tab layout component

最佳答案

我能够通过创建一个 @Input bool 值(称为 parentVisible)来解决问题,该 bool 值指示父对象是可见还是隐藏。此属性通过组件的递归层次结构向下级联。

parentVisible bool 值是设置每个子元素可见性的附加过滤器(如果 parentVisible 为 false,则可见性设置为隐藏,如果 parentVisible 为 true,则像以前一样设置可见性)

这种策略可以避免直接的 DOM 操作,这被认为有利于单元测试和以 Angular2 的方式做事 :smile:

关于css - Angular2 嵌套可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40574612/

25 4 0
文章推荐: javascript - jQuery 轮播 - 任意数量的图像
文章推荐: c++ - 搜索时 vector 键丢失
文章推荐: html - 如何使用 bootstrap 填充空白
文章推荐: jquery - 单击 显示/隐藏
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com