Rod*_*hoo 5 datasource input ngonchanges angular5 angular-material-5
有谁知道更新 ngOnChanges 生命周期挂钩中的 mat 表数据源是否可以?或者是否存在潜在的数据泄漏或大规模性能问题?
这是我的意思的一个简单示例。
子组件有一个输入数据的父组件,如下所示:
<data-list [data]="someData"></data-list>
Run Code Online (Sandbox Code Playgroud)
和子组件:
import { Component, Input, SimpleChanges, OnInit, OnChanges } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
@Component({
selector: 'data-list',
templateUrl: './data-list.component.html',
styleUrls: ['./data-list.component.scss']
})
export class DataListComponent implements OnInit, OnChanges {
@Input() data: any[];
dataSource: MatTableDataSource<any>;
displayedColumns = [
'title',
'detail'
];
constructor() { }
ngOnInit() {
this.dataSource = new MatTableDataSource<any>(this.data);
}
ngOnChanges(changes: SimpleChanges) {
this.dataSource = new MatTableDataSource<any>(changes.data.currentValue);
}
}
Run Code Online (Sandbox Code Playgroud)
现在父组件订阅了不同的 observables,它们对数据的不同变化做出反应。也就是说,如果添加或删除数据,则父组件会相应地更新,并将其作为输入传递给子组件。
由于子组件使用 ngOnChanges 生命周期钩子来观察输入数据的变化,子组件通过实例化一个新的 MatTableDataSource 来更新表数据。
一切正常。除了 ngOnChanges 经常触发,而且我每次都小心翼翼地实例化一个新的表源——就像这样,这让我很紧张。
我知道这个子组件可以只订阅更改并负责数据,而不是从父组件接收数据,但如果可以的话,我宁愿保留“智能”和“哑巴”组件关系。
有没有人在规模或生产中以这种方式做事?这个可以吗?我是否只是因为在过去 24 小时的大部分时间里一直盯着电脑屏幕而神经质?