父子通信不适用于 Angular 9 垫片

Question

我对Angular相对较新。我尝试使用 @Input(( 将数据从父组件传递到子组件，但更改没有反映出来。 我有一个带有选择元素的父组件，我想将所选项目的值传递给子项。 父组件有一个带有几个垫子选项卡的垫子选项卡组。

父网页

<mat-form-field>
<mat-select placeholder="Class" [formControl]="selectedClassControl" (selectionChange)="changeClassId()">
<mat-option *ngFor="let class of classes" value="{{class.id}}">{{class.classNumber}}-{{class.section}}</mat-option>
</mat-select>
</mat-form-field>
<mat-tab-group color="primary" (selectedIndexChange)="selectTab($event)">
<mat-tab label="Units">
<app-units [classId]="classId" *ngIf="selectedTab === 0"></app-units>
</mat-tab>
<!-- many such tabs with the same structure --> 
</mat-tab-group>

父 TS

classId : number = 0;
classes: Class[];
selectedClass: any;
selectedClassControl = new FormControl(this.selectedClass);
constructor(private classService: ClassService, private stateMgmtService: 
StateManagementService) { 
var schoolId = this.stateMgmtService.getSchoolId();
this.classService.getClasses(schoolId).subscribe(data =>{
this.classes = data;
})
}
selectedTab = 0;
ngOnInit(): void {
}
selectTab(event) {
this.selectedTab = event;
}
changeClassId(){
this.classId = this.selectedClassControl.value;
console.log("ClassId changed to "+this.classId);
}

子网页

<mat-form-field>
<mat-select placeholder="Subject" [formControl]="selectedSubjectControl" >
<mat-option *ngFor="let subject of subjects" value="{{subject.id}}">{{subject.code}}-{{subject.name}}</mat-option>
</mat-select>
</mat-form-field>

儿童 TS

@Input() classId : number = 0;
subjects: Subject[];
selectedSubject: any;
selectedSubjectControl = new FormControl(this.selectedSubject);
constructor(private classService: ClassService) { 
console.log("classId"+this.classId);
if(this.classId != 0)
classService.getSubjects(this.classId).subscribe( data => {
this.subjects = data;
})
}

我看到的是，当我在父组件中更改我的选择时，classId 没有传达给子组件，我应该手动刷新组件以反映更改吗？
任何帮助非常感谢...
蒂亚

Answer 1

这里有几件事。首先，请注意使用主题作为类名 主题是 rxjs 中的一个对象，您可能会意外导入它。我会让你的类名更具体。

接下来，您真的不需要选择更改事件逻辑。相反，您可以订阅窗体控件的 valueChanged 属性，并在 classId 变量发生更改时对其进行设置

this.selectedClassControl.valueChanges.subscribe(e => this.classId = e),

接下来，在子组件中，classId 将更新，但您的主题数组不会更新

我会像这样在您的输入上使用二传手

@Input() set classId(val: number) {
this._classId = val;
if(val != 0) {
classService.getSubjects(val).subscribe( data => {
this.subjects = data;
}); //assuming this is an http service so no unsubscribe is required
}
}
private _classId: number = 0;

Answer 2

对于输入变量，构造函数可能过早触发。您可以尝试使用钩子手动侦听输入变量OnChanges更改。尝试以下操作

import { Component, Input, OnChanges } from "@angular/core";
export class ChildComponent implements OnChanges {
@Input() classId: number = 0;
subjects: Subject[];
selectedSubject: any;
selectedSubjectControl = new FormControl(this.selectedSubject);
constructor(private classService: ClassService) { }
ngOnChanges() {
console.log("classId" + this.classId);
if(this.classId != 0) {
this.classService.getSubjects(this.classId).subscribe( data => {
this.subjects = data;
});
}
}
private doSomething(input: string) {}
}