Angular2隐藏显示基于多种条件智能方式的元素

Question

我的页面上有10-12个按钮和其他几个输入。 取决于我需要显示和隐藏按钮和输入的用户和用户类型。

例如

如果user = a则隐藏3个按钮和2个输入。 如果user = b且userType = mgr，则隐藏其他2个按钮和其他输入 等....

我如何巧妙地处理这些条件？

我是否应该在所有按钮和输入上写入条件？不同的模板？我可以在组件方面处理并在html中使用它吗？

请建议。

由于

Answer 1

我会在Component级别构建方法来封装驱动可见性的逻辑，并将它们与* ngIf或[hidden]结合起来。

换句话说：

• 表示需要显示的每个按钮，输入（或其他html元素） 或基于逻辑隐藏创建类似showElementXXX() : boolean
的方法
• 然后在模板中添加show / hide控制开关，例如

我希望这会有所帮助