角 |有条件地显示元素

Question

我正在尝试有条件地显示一个元素。我应用于元素的这段代码应该可以工作：

<a [style.display]="chatIsToggled ? 'display: block' : 'display: none'">
  link
</a>

问题在于 Angular 由于“不安全的样式值”而没有应用样式

警告：清理不安全的样式值显示：无（请参阅http://g.co/ng/security#xss）。

实现我想做的事情的等效方法是什么？

Answer 1

不要重复display，你只需要传递值本身：

<a [style.display]="chatIsToggled ? 'block' : 'none'">
  link
</a>

如果您使用具有显示实用程序类的 CSS 框架（如 Twitter Bootstrap），您可以有条件地分配一个特殊类：

<a [class.d-block]="chatIsToggled">
  link
</a>

您也可以只使用 *ngIf 结构指令：

<a *ngIf="chatIsToggled">
  link
</a>

但这确实有稍微不同的语义，因为如果不满足条件，它甚至不会渲染元素。例如，这会影响调用其生命周期方法的时间点。