使用 ngSwitch 在 Angular 11 a href 中的组件之间切换?
Use ngSwitch to switch between components in Angular 11 a href?
我必须要有子组件,我希望能够在两个子组件之间切换,但它不起作用。我不知道如何在这里实现它。
这是我的示例代码
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>
您的问题是:
- 缺少结束标记
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>
除了使用 ngSwitch,您还可以更简单地这样做:
<app-component-a *ngIf="selectedType == 'A'"></app-component-a>
<app-component-b *ngIf="selectedType != 'A'"></app-component-b>
我必须要有子组件,我希望能够在两个子组件之间切换,但它不起作用。我不知道如何在这里实现它。
这是我的示例代码
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>
您的问题是:
- 缺少结束标记
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>
除了使用 ngSwitch,您还可以更简单地这样做:
<app-component-a *ngIf="selectedType == 'A'"></app-component-a>
<app-component-b *ngIf="selectedType != 'A'"></app-component-b>