使用mat表数据源进行角度输入变化检测性能

时间:2018-03-06 23:37:43

标签: input datasource angular5 ngonchanges angular-material-5

有没有人知道在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);
  }

}

现在,父组件订阅了不同的observable,它们对数据的不同更改做出反应。也就是说,如果添加或删除数据,则相应地更新父组件,它将作为输入传递到子组件中。

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

一切都是花花公子。除了ngOnChanges经常发生火灾,我每次都要小心地实例化一个新的表源 - 就像在,它让我感到紧张。

我知道这个子组件可以只订阅更改并负责数据,而不是从父组件接收它,但我宁愿保持&#34; smart&#34;和&#34;哑巴&#34;组件关系,如果可以的话。

有人在规模或生产中这样做吗?这个可以吗?我只是神经质,因为我在最近24小时的一半时间里一直盯着我的电脑屏幕?

0 个答案:

没有答案