如何使用 ngSwitch 在 angular 组件之间切换

Question

我在父组件中有两个名为 student 和 Staff 的子登录表单组件，一旦用户选择用户类型，我想在父组件中显示其中一个。

请我不知道如何在这里实现它。

<div class="parent-component">
             <app-staff></app-staff>
            <app-student></app-student>

</div>

Answer 1

将用户选择的值存储在变量中。 在下面的代码片段中，我为用户使用了一个选择标签来选择用户类型。 我还使用ngModel （模板驱动表单）将用户选择分配给名为userType的变量。

我在父div的ngSwitch属性中使用userType 。 然后使用结构指令*ngSwitchCase我们可以驱动哪个组件必须显示如下 -

<select [(ngModel)]="userType">
  <option value="staff">Staff</option>
  <option value="student">Student</option>
</select>

<div class="parent-component" [ngSwitch]="userType">
  <app-staff *ngSwitchCase="userType==='staff'"></app-staff>
  <app-student *ngSwitchCase="userType==='student'"></app-student>
</div>

更多关于NgSwitch 。 或者，我们也可以使用*ngIf来实现相同的目的。