Angular 2，当parent组件进行rest调用时生成结果table

Question

我想

运行我的 parent 组件中的 REST 查询 (getTest())
根据运行上面的查询，我希望它填充 results: test[] with the results
Once results: test[] 已填充我希望将其传递给 child class 以便它可以用于生成 HTML table 以便 table 的行代表结果。

我的问题是 child class 中的 ngOnChanges() 方法从未被调用，所以我不确定如何从parent 何时可用。

这是我的 parent 和 child 组件 .ts 文件

export class BlotterComponent implements OnInit, OnChanges {
showAdvancedForm: boolean;
results: test[];

constructor(private blotterPostService: BlotterPostService) {
    this.showAdvancedForm = false;
}

ngOnInit() {}

ngOnChanges(changes: any) {
    console.log("ngOnChanges BlotterComponent");
    console.log(this.results);
}

getTest() {
    console.log("Running test RESTful query..");
    this.blotterTradesPostService.getTestQuery().subscribe(u => {
        this.results = u;
        console.log(this.results);
    });
    }
}

这是我的 child 组件 .ts 文件。

export class TestTableComponent implements OnInit, OnChanges {
  @Input() testResults: test[];

  constructor() { }

  ngOnInit() {}

  ngOnChanges() {
      console.log("ngOnChanges TestTableComponent search results");
      console.log(this.testResults);
  }

}

Answer 1

您可以创建服务并使用 Event Emitter 发出更改，然后在子组件中订阅这些更改，您必须这样做

1:-创建服务

import { Injectable, Inject,EventEmitter } from '@angular/core';
@Injectable()
export class EmitterService {
public testEmitter:EventEmitter<test[]>=new EventEmitter(); 
}

2.in 你的根组件在 counstructor 中注入服务 depandany 并在结果出现时发出

  constructor(private emitter :EmitterService) //inject service

 this.blotterTradesPostService.getTestQuery().subscribe(u => {
    this.emitter.testEmitter.emit(u);
    console.log(this.results);
});

3.In 你的子组件构造函数

  constructor(private emitter :EmitterService){
    this.emitter.testEmitter.subscribe(results =>{
    //here you can write your code it will be called every time emit method is called
  })
 }

有关更多信息，您可以查看 this plunker

Angular 2，当parent组件进行rest调用时生成结果table

Angular 2 , generate results table when parent component makes rest call

typescript

angular2-components

angular