使用嵌套组件并使用ng-hide隐藏它们的Angular Web架构

Question

我正在使用Angular 1.X开发一个应用程序。

有一个跨三个页面使用的组件。

我将几个嵌套组件放入一个主组件中。但是，有两个组件只会显示在一个页面上。我目前正在 ng-if（处理他们），想知道这是否是一个糟糕的选择。

    <!-- Component 1 -->  
      <div class="wrapper">
       <div ng-if="showChildren">
          <component2> </component2> 
       </div>
    <!-- more code goes here  -->  
       <div ng-if="showChildren">
          <component3> </component3> 
       </div>
     </div>

在所需的页面上，我将添加控制器

<component1 showChildren="true"></component1>

代码有效，它在页面或控制台上没有错误。

尽管可能还有其他解决方案，但这有什么实际上是糟糕的设计/实现吗？

Answer 1

这主要是偏好问题，因为您的解决方案本身并没有什么问题。

不过只有几个建议：

• 如果你隐藏了div.wrapper的所有子项，为什么不将ng-show应用于包装器本身呢？
• 既然showChildren的值似乎不会改变，为什么不使用ng-if来代替，并简化 DOM？ ng-show仍然生成隐藏的 DOM 元素并使用样式来隐藏它们，而ng-if根本不会生成它们。