Angular 2 - ngShow 等效？ [复制]

Posted 2023-03-13

【中文标题】Angular 2 - ngShow 等效？ [复制]

【英文标题】：Angular 2 - ngShow equivalent? [duplicate]

【发布时间】：2017-07-02 03:49:19

【问题描述】：

根据我对文档的解释，如果我希望能够默认隐藏一个元素，并在单击链接时显示，那么以下应该可以工作吗？

在 /app/app.component.ts 中

newTrustFormVisible: false;

在 /app/app.component.html 中

<a href="#" (click)="newTrustFormVisible = !newTrustFormVisible;">[Add New]</a>

<div ng-show="newTrustFormVisible" class="panel panel-default">
  ...
</div>

但是，这不起作用。它也不会产生错误。我错过了什么？

【问题讨论】：

我也尝试过newTrustFormVisible: boolean = false;，我认为这实际上是该行的正确语法，尽管它对结果没有任何影响。

【参考方案1】：

您使用 Angular 1 指令。对于 Angular 2，使用 *ngIf 用于隐藏时不需要在 DOM 中的组件，或者如果您希望组件始终在 DOM 中但使用 CSS 隐藏，则绑定到 HTML 隐藏属性 [hidden]。

例如：

<div *ngIf="newTrustFormVisible" class="panel panel-default">

或

<div [hidden]="!newTrustFormVisible" class="panel panel-default">

Angular 1 to Angular 2 reference

*ngIf

【讨论】：

这行得通，谢谢，但它不像文档中的示例那样具有动画效果（您说得对，似乎是针对 AngularJS 1.x）？

动画是一锅单独的鱼，请参阅angular.io/docs/ts/latest/guide/animations.html

所以在 ng-show 会自动动画的地方，最接近的 Angular 2 等价物不会这样做。看起来很奇怪？我已经切换到 ngClass，因为这看起来更容易制作动画，尽管我还没有动画可以工作。我会继续玩的。

如果使用第二种技术，使用这个：[hidden] display: none !important;