组件间通信

Question

我使用 Angular 1.6。 我有组件“用户详细信息”，其中包含另外两个组件“切换器”和“用户表”，如下所示：

<user-details>
    <switcher> </switcher>
    <user-table> </user-table>
</user-details>

“switcher”组件包含 md-switcher，“user-table”包含数据表。当我按下 md-switcher 时，我需要借助 ng-if 指令隐藏我的“用户表”组件。

Answer 1

您可以使用div（甚至span）包装<user-table> 组件，然后使用ng-if 或ng-show。然后可以使用md-switcher 更改隐藏此组件的条件。

所以假设你有一个这样的 md-switcher：

<md-switch ng-model="canShow" aria-label="Show?">
  Show ?
</md-switch>

表达式"canShow" 用于绑定数据，稍后用于决定显示/隐藏<user-table>，如下所示：

<div ng-show="canShow" ...>
  <user-table> </user-table>
</div>

虽然我使用了div，但我相信你可以使用span获得类似的效果。试一试，如果有帮助，请告诉我们。