-2

考虑以下层次结构：

<app-component>
    <university-component></university-component>
    <highSchool-component></highSchool-component>
</app-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 组件，我该怎么做

4

3 回答 3

2

我认为您已经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

于 2021-10-26T10:21:11.130 回答
0

我相信这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 的指令从 html 转到该路线，也可以routerLink从表单上调用的当前函数转到该路线。

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

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

看起来您也正在formControlName使用ngModel，这可能会导致错误。上面的方法是使用ngModel值，你可以通过访问你的表单值来使用表单值。

于 2021-10-26T14:13:54.503 回答
0

谢谢大家的答案，

我找到了解决方案。我创建了一个服务“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 中：

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

}
于 2021-10-26T17:09:00.133 回答