Question

我在Angular 7应用程序中具有以下内容，以显示/隐藏更多元素（Example）：

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li *ngIf ="hidden">Item 3</li>
 <li *ngIf ="hidden">Item 4</li>
</ul>

<a href="#" (click)="hidden = !hidden"> {{hidden ? 'show less' : 'show more'}}</a>

问题

这可以通过指令来完成吗？

这是我经常使用的东西。我不确定指令是否可以做到这一点以及如何做到。
在Angular 2+中可以定义变量，例如隐藏，在没有组件的HTML中？

我可以使用隐藏了变量的组件，但对于简单的事情来说，这有什么用吗？

Answer 1

您可以创建一个基本的Component来实现。您可以在基本组件中添加hidden变量，最终可以公开一种方法来更改hidden的可变值。

通过这种方式，所有扩展组件都将具有hidden变量。但是，如果您不需要任何其他功能，并且仅使用布尔值（hidden或this.hidden = true）更新this.hidden = false变量，那么您将没有任何其他优势。

最后请记住，用于更新hidden变量值的按钮（或其他您想使用的按钮）必须留在子组件的模板文件中。

在这种情况下，我认为您的解决方案是最好的解决方案，但是如果您想使方法复杂一点，可以使用

一个小的HideButtonComponent，仅带有“显示较少” /“显示更多”按钮
包含您的HideService变量的hidden（由HideButtonComponent更新）

然后将HideService注入到构造函数中，并订阅hidden变量更改。您可以将HideButtonComponent放入组件的模板文件中，以避免重复按钮代码

但我重复一遍：这是一个很小的优势

显示更多/更少显示的角度指令

1 个答案: