根据特定的角度查看另一个组件中的特定组件

Question

我有5个组件，我想根据特定条件在另一个组件中查看其中一个组件例如，当查看x = 1第一组件时，查看x = 2第二组件，依此类推x的含义可以更改]

Answer 1

x是您要测试的位置（根据您的示例，x = 1）

<div [ngSwitch]="x">
  <some-element *ngSwitchCase="1">...</some-element>
  <some-other-element *ngSwitchCase="2">...</some-other-element>
  <some-other-element-2 *ngSwitchCase="3">...</some-other-element-2>
  <some-other-element-3 *ngSwitchDefault>No matches found</some-element-3>
</div>

参考：https://angular.io/api/common/NgSwitch

Answer 2

您可以为此使用NgSwitch Directive

<container-element [ngSwitch]="switch_expression">
  <!-- the same view can be shown in more than one case -->
  <some-element *ngSwitchCase="match_expression_1">...</some-element>
  <some-element *ngSwitchCase="match_expression_2">...</some-element>
  <some-other-element *ngSwitchCase="match_expression_3">...</some-other-element>
  <!--default case when there are no matches -->
  <some-element *ngSwitchDefault>...</some-element>
</container-element>

或者，您也可以使用NgIf Directive，但是NgSwitch更适合用于多个选择的单个表达式。

<div *ngIf="condition">Content to render when condition is true.</div>