Question

Angular 2，更新md-table子组件的问题

所以我有3个组件：包含component1和component2的父组件，例如：

<html of parent component>    
    <component1> </ component1>    
    <component2> </ component2> 
</ html parent>

component2有一个显示在表中的项列表，在component1上执行的操作需要将项添加到component2列表中，然后需要更新它。我在component1构造函数中执行了以下操作，我注入了component2：

component1的构造函数中的示例：

constructor (private component2: Component2) {}

。。这样我就可以使用component1的所有方法，甚至可以添加component1列表中的所有项目，到目前为止这么好，添加了项目，问题是在将项目添加到列表后，表格不会更新这些新项目项目，我知道项目在那里，因为如果我尝试在componet1中添加新项目，它会警告它已经存在，它只是没有更新表格。。。以下是如何实施该部分的示例：

///////////////////// COMPONENT2与表：

let dataBase: Items [] = [];
export class COMPONENT1 implements OnInit, OnChanges {

public dataSource: ExampleDataSource;

ngOnChanges (changes: SimpleChanges) {
  dataBase = this.listWithItems;
  this.createDataSource ();
}

private createDataSource () {
  this.dataSource = new ExampleDataSource (dataBase);
}

// This method is used by component1 to update the table
public updateListListList () {
  dataBase = this.listWithItens
  this.createDataSource ();
}

COMPONENT2 HTML

<md-table #table [dataSource] = "dataSource" mdSort>
 ...
 ...
</ md-table>

COMPONENT1

 constructor (private component2: Component2) {}

。。使用component1的方法：

methodUpdatingListChild() {
  this.component2.listWithItens = "At this point I add all the items I want to 
  add to the table of component2"
  this.component1.updateLocalListList ();
}

。。在我所说的这个电话中，我可以在列表中添加项目，它们在那里是因为我无法将重复的项目添加到列表中，并且在此操作之后如果我尝试添加某些内容，则会警告该项目已在列表中，我只需要更新component2中的component1表，任何解决方案吗？

Answer 1

更好的方法是利用Subject / Observables服务。

要在两个非分层嵌套的组件之间进行通信，它仍然是最佳方式。

示例文档：Components communication via service

Answer 2

我正在使用材料的md-table，尝试了几种解决方案，并且没有一个使这个倾斜工作，所以我改变了md表为一个简单的表，它工作，Herezia感谢帮助，我没有知道Observer，我上面展示的解决方案的组件，一切都很好。

Angular 2，我需要更新子组件

2 个答案: