时间戳

首页 > 解决方案 > 单击相邻元素时，如何创建自定义角度指令以显示和隐藏子元素？

angular - 单击相邻元素时，如何创建自定义角度指令以显示和隐藏子元素？

问题描述

单击相邻元素时，如何创建自定义角度指令以显示和隐藏子元素？

因此，当单击 h2 时，我想使用自定义指令显示 custom_elem。

请记住，div 与 ngFor 重复。所以 div 的实例应该只在点击 h2 时显示子元素（custom_elem），而其他 div 实例的子元素（custom_elem）保持隐藏。

<div *ngFor="let item of items"> 
 <h2 (click)="" >item.name</h2>   // if I click here it will pass show or hide (true or false) values to the directive. 
 <custom_elem>somedata</custom_elem>  //show these (then the directive will handle the display properties of these child elements)
<div>

看到我没有；想要动态添加任何新内容。

ngfor 本身已经在循环（在开始时）。只有我想要的是，当我单击 h2（使用自定义指令）时，我只想切换 (custom_elem) 的显示。

我们想要一个自定义指令。这样当我单击 h2 时，我可以将 true 或 false 值传递给指令，然后指令将处理 (custom_elem) 的显示属性

这样，显示或隐藏属性与相应元素的实例在本地绑定。& 未连接到 component.ts。

更新 div 与 ngFor 重复。h2 将始终可见。单击 h2 时，custom_element 显示打开和关闭。

这是需要的最终结果。当我点击 h2 时，我想显示相应的 custom_elem（它是 h2 的邻居）。

标签： angular

解决方案

好吧，它可以作为一个起点，但是您必须注意将发生的几种特殊情况：

  1. 添加/删除元素
  2. 没有孩子的标题
  3. 可以指定标题元素类型

基本上，这个Stackblitz 演示中显示了您所要求的初始版本，没有优化（因为这里发布的代码行太多 - 但我会尝试强调一些要点）。

该指令以它的名字命名appHideChildren，它可以像这样使用：

<hello [appHideChildren]="true"></hello>

通过这样做，组件的所有子hello组件，但h2元素，将被隐藏（因为它被设置为true）。这只是孩子们的初始状态。组件初始化后，单击标题将负责切换显示。

所做的是找到宿主组件的所有直接子组件：

<!-- $el is the host element -->
this._children = $el.querySelectorAll(`${$el.tagName}>*`);

然后，将事件侦听器添加到标头（h2元素），并找到每个标头的以下兄弟姐妹并保留对它们的引用。事件侦听器遍历单击的标头的所有子项，切换其状态。显示属性的先前状态被存储以在必须显示组件时恢复。

推荐阅读