我有一个模块ProgettiAzioniModule在两个组件SchedarioComponent和SituazioneClienteComponent之间共享。该模块由两个 mat-select 组成:
<div class="progettiAzioniBody">
<div>
<h3 class="progettiAzioniTitle">
{{ 'anms.progettiazioni.selezionaprogettoazione' | translate}}
</h3>
</div>
<div fxLayout fxLayoutGap="10px" fxLayout.xs="column">
<mat-form-field *ngIf="progetti$ | async" appearance="outline">
<mat-select [(value)]="selectedIdProgetto" ngModel [formControl]="prjSearchCtrl" placeholder="{{ 'anms.progettiazioni.selezionaprogetto' | translate}}" name="progetto" required (selectionChange)="onProjectChange($event)" #singleSelect>
<mat-option>
<ngx-mat-select-search [formControl]="prjSearchFilterCtrl" noEntriesFoundLabel="{{ 'anms.shared.nessunrisultato' | translate}}" placeholderLabel="{{ 'anms.shared.cerca' | translate}}"></ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let progetto of prjFilteredSearch | async" [value]="progetto.IDProgetto">
{{ progetto.NomeEsterno }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-select [(value)]="selectedIdAzione" ngModel placeholder="{{ 'anms.progettiazioni.selezionaazione' | translate}}" name="azione" required (selectionChange)="onActionChange($event)">
<mat-option *ngFor="let azione of azioni$ | async" [value]="azione.IDAzione">
{{ azione.DescrizioneAzione }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
在SchedarioComponent 中 ,我从 mat-select 中选择项目和操作,然后通过 router.navigate 的参数将这两个值传递给SituazioneClienteComponent
situazioneCliente(anagrafica: AnagraficheSchedario) {
const myurl = `/situazione-cliente/${anagrafica.IDAnagrafica}/${this.idProgetto}/${this.idAzione}`;
this.router.navigateByUrl(myurl);
}
在SituazioneClienteComponent 中,我使用来自路由器参数的值设置了两个 @Output 数字变量:
@Output() selectedIdProgetto: number;
@Output() selectedIdAzione: number;
constructor(private store: Store,private actRoute: ActivatedRoute) {
this.idAnagrafica = this.actRoute.snapshot.params.idAnagrafica;
this.selectedIdProgetto = this.actRoute.snapshot.params.idProgetto;
this.selectedIdAzione = this.actRoute.snapshot.params.idAzione;
}
ProgettiAzioniComponent在@Input 中接收这两个变量。因此,从SitazioneClienteComponent我可以通过 [selectedIdProgetto] 和 [selectedIdAzione]将这些变量传递给ProgettiAzioniComponent的选择器
<div class="situazioneClienteBody">
<div fxLayout fxLayout.xs="column">
<div class="infoAnag">
{{idAnagrafica}}
</div>
<div class="azioniAnag">
<div class="schedarioProgettiAzioni">
<anms-progettiazioni [azioni$]="azioni$" [progetti$]="progetti$" [selectedIdProgetto]="selectedIdProgetto" [sele
ctedIdAzione]="selectedIdAzione" (prgEvent)="progettoFromChild($event)" (actEvent)="azioneFromChild($event)">
</anms-progettiazioni>
</div>
</div>
</div>
</div>
我可以在 ProgettiAzioniComponent 中看到这些值,但我无法使用它们预先选择 mat-select 选项,即使我将两个 mat-select 的 [(value)] 设置为 [(value)]="selectedIdProgetto"和 [(value)]="selectedIdAzione"
有人可以帮助我吗?提前致谢