просмотреть определенный компонент в другом компоненте в соответствии с определенным условием в угловых

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

<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 , но NgSwitch больше подходит для одного выражения длянесколько вариантов выбора.

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