如何同步 angular 2 或 4 个生命周期钩子和可观察对象

Question

我想将我的 angular 2 个生命周期钩子与 Observable 同步。例如在下面的场景中。

**Temp Component**

    @Component({
    selector: 'temp-component',
    template: `<table [tableData]='tableData'>
    </table >`
})

export class TempComponent implements OnInit{
private data;
private tabledata;
   ngOnInit {
       this.getData(Dataurl).subscribe(
                        (data3: any) => {
                            this.data = data3;
                        },
                        (err: any) => {
                            console.error(err);
                        },
                        () => {
                            this.tabledata = this.data;
                            console.log('In temp component..', this.tabledata);
                        }

   }

getData(url: string): Observable<any> {
        return this.http.get(url)
        .map((res: Response) => res.json())
        .catch((err: Response) => Observable.throw(err.json().error));
    }

}

**Table Component :**

@Component({
    selector: 'table',
    template: `code for displaying table`
})

export class TableComponent implements OnInit{
   @Input tableData: any;
   ngOnInit{
      console.log('table Data..' , this.tableData);
   }
}


**Output :**
table Data.. undefined
In temp component.. (Displaying table data info)

在上述场景中，我希望 table 数据显示为与临时组件中的数据相同。任何人都知道如何在 observable 完成后显示 table。

Answer 1

你需要使用ngOnChange hook，Angular当组件的输入值改变时调用这个方法。我的意思是：

.....
export class TableComponent implements OnChanges {
@Input() tableData:any;
ngOnChanges(changes:SimplesChanges){
      if(changes['tableData']){
           console.log(this.tableData);
      }
}

希望能帮到你！！！

Answer 2

你的代码没有任何问题，只是你实际上没有显示数据，而且你从控制台日志告诉你的内容中得到了错误的想法，正如 Nour 在评论中指出的那样。

如果您将输入变量设为属性并改为 setter，就会看到这一点。

@Component({
  selector: 'table',
  template: `<code>{{ tableData | json }}</code>`
})
export class TableComponent implements OnInit{
  @Input() public set tableData(value: any) {
    console.log('table data updated: ', value);
    this._tableData = value;
  }

  public get tableData() {
    return this._tableData;
  }
  private _tableData: any;

  ngOnInit{
    console.log('table Data..' , this.tableData);
  }
}

您现在应该可以看到您的

table Data..undefined

和以前一样，接下来是

table data updated: {}

值更新时的文本。尝试在模板中显示数据，例如使用

<code>{{ tableData | json ]]</code>

当值更新时，也会在您的视图中看到。另外不要忘记，您绑定的值应该是 public 以便 aot 编译工作，如果这是您感兴趣的功能的话。

如何同步 angular 2 或 4 个生命周期钩子和可观察对象

How to Synchronize angular 2 or 4 life cycle hook and observables

angular

observable

angular2-observables