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

Question

考虑以下层次结构:

<app-component>
<university-component></university-component>
<highSchool-component></highSchool-component>
</app-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>

如果我选择了大学，app-component会加载大学组件，如果我选择了高中，app-component会加载高中组件

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和ngSwtichCasehttps://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

谢谢大家的回答，

我找到解决办法了。我创建了一个service ' 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;
} 
} 

and in app-component:

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

和我在dialog.component.html中添加了两个(click):

<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();
}
}