6

有谁知道在 ngOnChanges 生命周期挂钩中更新 mat 表数据源是否可以？或者是否存在大规模的潜在数据泄漏或性能问题？

这是我的意思的一个简单示例。

子组件有一个输入数据的父组件，如下所示：

<data-list [data]="someData"></data-list>

和子组件：

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

}

现在父组件订阅了不同的可观察对象，这些可观察对象对数据的不同更改做出反应。也就是说，如果添加或删除数据，则相应地更新父组件，并将其作为输入传递给子组件。

由于子组件使用 ngOnChanges 生命周期钩子来监视输入数据的变化，因此子组件通过实例化一个新的 MatTableDataSource 来更新表数据。

一切正常。除了 ngOnChanges 经常触发而且我每次都实例化一个新的表源时我很谨慎——就像这样，这让我很紧张。

我知道这个子组件可以只订阅更改并负责数据而不是从父组件接收数据，但如果可以的话，我宁愿保持“智能”和“哑”组件的关系。

有人在大规模或生产中以这种方式做事吗？这个可以吗？我只是因为在过去 24 小时的大部分时间里一直盯着我的电脑屏幕而变得神经质吗？

4

0 回答 0