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

Question

关于一个显示/隐藏更多元素(示例)的Range7应用程序，我有以下内容：

<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>

问题

1. 这能用指令来完成吗？ 这是我经常用的东西。我不确定指令是否能做到这一点，以及如何做到这一点。
2. 在角2+中定义变量是可以的，例如，在没有组件的HTML中?我可以使用变量隐藏的组件，但是对于简单的东西，不是很简单吗？

Answer 1

你可以做一个基本组件来实现这一点。在基本组件中，您可以添加hidden变量，并最终可以公开一个方法来更改hidden变量值。

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

最后，请记住，更新hidden变量值的按钮(或您想要使用的其他东西)必须保留在子组件的模板文件中。

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

• 只有“显示更少”/“显示更多”按钮的小型HideButtonComponent
• 包含HideService变量的hidden (由HideButtonComponent更新)

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

但我再说一遍:这是一个很小的优势。