4 min read

11/11

angular

constructor() ngOnchanges() ngOnInit() ngDocheck ngOnDestroy生命周期

export …

@ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) sort!: MatSort;
是调用了两个控件的构造函数，一个是分页控件，另一个是排序控件。

constructor(

private snackBar: MatSnackBar

) {}
依赖（MatSnackBar）（由angular）注入（给组件scores）

ngAfterViewInit() {

this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;

}
将分页和排序器赋值给数据源DataSource

saveScore(scoreId: number): void {

if (this.teacherId && this.editingScoreId){
this.scoreUpdated.emit({
teacherId: this.teacherId,
scoreId: this.editingScoreId,
score: this.editingScore
});
// 不再立即清除编辑状态，而是在父组件更新成功后通过@Input更新
}
}
}

等价于python中if a and b双重守卫结构
如果teacher_id存在，且editingScoreId存在，那么就触发scoreUpdated事件，将teacherId、editingScoreId、editingScore作为参数传递。

ngOnChanges(changes: SimpleChanges): void {

if (changes['scores'] && changes['scores'].currentValue) {
  this.dataSource.data = changes['scores'].currentValue;
}

}
同理类比class ScoresComponent:
def init(self):
self.data_source = []

def on_changes(self, changes):
    if "scores" in changes and changes["scores"]["currentValue"]:
        self.data_source = changes["scores"]["currentValue"]

模拟外部传入新数据

component = ScoresComponent()
component.on_changes({“scores”: {“currentValue”: [90, 85, 88]}})
print(component.data_source) # [90, 85, 88]
changes[“scores”][“currentValue”]

changes[“scores”][“currentValue”]scores字典里，找到currentValue键对应的值

疑惑：
改一次成绩，为什么跳转html很多次？
ondestroy什么时候触发？

Janet paused