如何在 Angular 8 中有条件地加载两个子组件

Question

考虑以下层次结构：

<app-component>
    <university-component></university-component>
    <highSchool-component></highSchool-component>
</app-component>

在打开的应用程序组件中显示的对话框组件（dialog-component）包含 2 个选项（大学和高中：

<form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <h3> Please select your academic level </h3>
            <nz-form-control [nzErrorTip]="getErrorTip('studentLevel')">
              <nz-radio-group [(ngModel)]="radioValue" formControlName="studentLevel" nzButtonStyle="solid" nzSize="small">

                  <input type="radio" name="radio3" id="university" (change)="setRouter(2)">
                      <label class="universite-label four col" nzValue="universite" for="universite">University</label>
                  <input type="radio" name="radio3" id="highSchool" (change)="setRouter(1)">
                      <label class="lycee-label four col" nzValue="lycee" for="lycee" >High School</label>

              </nz-radio-group>
            </nz-form-control>
            
       <div>
       <label nzType="flex" nzJustify="center" nzAlign="middle" nz-radio-button (click)="changeRoute()" mat-dialog-close >GO</label>
       </div>

</form>

如果我选择大学，应用程序组件加载大学组件，如果我选择高中，应用程序组件加载 highSchool 组件，我该怎么做

Answer 1

我认为您已经将radioValue 绑定到ngModel，因此您可以执行以下操作，假设AppComponent 可以访问radioValue

<app-component>
  <university-component *ngIf="radioValue === 'universityComponentVal'"> </university-compnent>
  <high-school-component *ngIf="radioValue === 'highSchoolVal'"></high-school-component>
</app-component>

如果条件渲染组件的数量增加，您可能需要使用ngSwitch 和ngSwtichCase https://angular.io/api/common/NgSwitchCase

Answer 2

我相信ngIf 是最简单的方法，我建议使用路由，除非父组件有共享变量。这也将允许将来进行深度链接，这样您的用户就可以避免每次都需要选择一个值。

export const appRoutes: Routes = [
  ... Any other routes you have
  {
    path: 'university',
    component: UniversityComponent,
  },
  {
    path: 'highSchool',
    component: HighSchoolComponent
  }
};

@NgModule({
  imports: [
    ...
    RouterModule.forRoot(appRoutes)
  ]
})
export class AppModule {}

您可以使用 Angular 中的 routerLink 指令从 html 转到该路由，也可以从表单上调用的当前函数转到该路由。

@Component({
  ...
})
export class AppComponent {
  radioValue: 'university' | 'highSchool';
 
  constructor(private router: Router) {}

  changeRoute() {
    this.router.navigate([this.radioValue]);
  }
}

您似乎也在将formControlName 与ngModel 联合起来，这可能会导致错误。上述方法是使用ngModel 值，您可以通过访问您的表单值来使用表单值。

Answer 3

谢谢大家的回答，

我找到了解决方案。 我创建了一个服务“level.service.ts”：

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LevelService {

  isUniversity: boolean = true;

  constructor() { }

  highScool() {
    this.isUniversity = false;
  }

  universite() {
    this.isUniversity = true;
  } 
} 

在应用组件中：

<app-component>
    <university-component *ngIf="levelService.isUniversity"></university-component>
    <highSchool-component *ngIf="!levelService.isUniversity"></highSchool-component>
</app-component>

我在 dialog.component.html 中添加了两个（点击）：

<form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <h3> Please select your academic level </h3>
            <nz-form-control [nzErrorTip]="getErrorTip('studentLevel')">
              <nz-radio-group [(ngModel)]="radioValue" formControlName="studentLevel" nzButtonStyle="solid" nzSize="small">

                  <input type="radio" name="radio3" id="university" (change)="setRouter(2)">
                      <label class="universite-label four col" nzValue="universite" for="universite" (click)="university()">University</label>
                  <input type="radio" name="radio3" id="highSchool" (change)="setRouter(1)">
                      <label class="lycee-label four col" nzValue="lycee" for="lycee" (click)="highSchool()">High School</label>

              </nz-radio-group>
            </nz-form-control>
            
       <div>
       <label nzType="flex" nzJustify="center" nzAlign="middle" nz-radio-button (click)="changeRoute()" mat-dialog-close >GO</label>
       </div>

</form>

在 dialog.component.ts 中：

import { Component} from '@angular/core';
import { UniversityService } from 'src/app/services/university.service';
// others import

@Component({
  selector: 'app-dialog-video',
  templateUrl: './dialog-video.component.html',
  styleUrls: ['./dialog-video.component.css']
})

export class DialogVideoComponent implements OnInit {

  @Input() radioValue = 'college'

  isUniversity: string = 'universite';

  // constructor() { } 
 
 // other logics

  ngOnInit() {
    // this.universityService.isUniversity = this.radioValue;
    this.universityService.collegeLycee(),
    this.universityService.universite()
  }

  highSchool() {
    this.universityService.collegeLycee();
  }

  university() {
    this.universityService.universite();
  }

}