使用 ngSwitch 在 Angular 11 a href 中的组件之间切换？

Question

我必须要有子组件，我希望能够在两个子组件之间切换，但它不起作用。我不知道如何在这里实现它。

这是我的示例代码

HTML

<h3 class="first">Choose View</h3>
<a options="A">A</a>
<a options="B">B</a>
<p>Selected Type: <span style="font-weight: bold">{{selectedType}}</span></p>

<!-- Switching Mechanism -->

<div [ngSwitch]="selectedType">
  <li *ngSwitchCase="'A'"> <app-component-a></app-component-a>
  <li *ngSwitchCase="'B'">  <app-component-b></app-component-b>
  <li *ngSwitchDefault><app-component-b></app-component-b>
</div>

STACKBLITZ

Answer 1

您的问题是：

缺少结束标记
li 里面 div
不确定 options="A" 应该做什么，您需要设置 selectedType 变量

<h3 class="first">Choose View</h3>
<a (click)="selectedType='A'">A</a><br />
<a (click)="selectedType='B'">B</a>
<p>Selected Type: <span style="font-weight: bold">{{selectedType}}</span></p>

<!-- Switching Mechanism -->

<ul [ngSwitch]="selectedType">
  <li *ngSwitchCase="'A'"> <app-component-a></app-component-a></li>
  <li *ngSwitchCase="'B'">  <app-component-b></app-component-b></li>
  <li *ngSwitchDefault><app-component-b></app-component-b></li>
</ul>

Updated Stackblitz

除了使用 ngSwitch，您还可以更简单地这样做：

<app-component-a *ngIf="selectedType == 'A'"></app-component-a>
<app-component-b *ngIf="selectedType != 'A'"></app-component-b>

使用 ngSwitch 在 Angular 11 a href 中的组件之间切换？

Use ngSwitch to switch between components in Angular 11 a href?

angular

typescript

ng-switch