Angular 2+中的 ngShow 和 ngHide 等效于什么？

在 Angular 2+ 中，没有像 AngularJS 中那样的 ng-show 和 ng-hide 指令。但是，我们可以使用 ngIf 指令来实现类似的功能。

ngIf 指令

ngIf 指令基于给定表达式的值，显示或隐藏指定的 DOM 元素。

下面是 ngIf 指令的语法：

<element *ngIf="expression">...</element>

其中，expression 是一个表达式，如果它的值为 true，就显示元素；如果它的值为 false，就隐藏元素。

ngIfElse 指令

在某些情况下，我们可能需要在条件为 false 时显示不同的内容。例如，我们可以在加载数据时显示一个 loading 界面，当数据加载完成后，再显示实际数据。

为了实现这个目的，Angular 2+ 提供了一个 ngIfElse 指令。

下面是 ngIfElse 指令的语法：

<element *ngIf="expression; else elseBlock">...</element>

<ng-template #elseBlock>...</ng-template>

其中，elseBlock 是一个模板，它会在表达式值为 false 时显示。

示例

下面是一个使用 ngIf 和 ngIfElse 指令的示例：

<div *ngIf="loaded; else loading">
  <!-- 实际数据 -->
</div>

<ng-template #loading>
  <!-- loading 界面 -->
</ng-template>

在这个示例中，loaded 是一个布尔值，用来判断数据是否加载完成。如果 loaded 为 true，就显示实际数据；如果 loaded 为 false，就显示 loading 界面。

总结

在 Angular 2+ 中，可以使用 ngIf 指令来控制 DOM 元素的显示和隐藏。如果需要在条件为 false 时显示不同的内容，可以使用 ngIfElse 指令。