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

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

项目1
项目2
第3项
第4项

问题

这可以通过指令来完成吗

这是我经常使用的东西。我不确定指令是否能做到这一点，以及如何做到这一点

在Angular 2+中，在没有组件的HTML中定义变量（例如隐藏）可以吗

我可以使用一个隐藏了变量的组件，但对于这么简单的东西来说，这不是很简单吗

---

您可以制作一个基本组件来实现这一点。 在基本组件中，可以添加

hidden

变量，最终可以公开一个方法来更改

hidden

变量值

通过这种方式，所有扩展组件都将具有

隐藏的
变量。
但是，如果您不需要其他任何东西，并且您的
hidden
变量仅使用布尔值（
this.hidden=true
或
this.hidden=false
）进行更新，那么您将没有任何其他优势

最后请记住，更新
隐藏的
变量值的按钮（或您想要使用的内容）必须保留在子组件的模板文件中

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


一个小的
隐藏按钮组件
，只有“显示较少”/“显示较多”按钮
包含
隐藏的
变量的
HideService
（由
HideButtonComponent
更新）


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

但我重复一次：这是一个非常小的优势
您可以在指令中使用ViewChildren（记住实现AfterViewInit），因此是否创建不可见元素。为此，注入Rendered2以添加/删除属性display:none
<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>