angular2父子组件通讯 异步问题

问题描述

问 题

angular2父子组件通讯，可以通过：在父组件的模板中绑定变量，在子组件的属性用 @Input 进行修饰。
现在遇到的问题是：一般变量，可以通过这种方式来通讯，但遇到需要加载其他资源，比如ajax这种异步加装变量的方式，就会导致错误。
父组件：

//html
<div class="modifymember-wrap">
  <addmember [adminData]="admin"></addmember>
</div>
//ts
this.managerService.selectedAdmin.subscribe(data => {
      this.admin = data;
      });

managerService为一个服务，里面的selectedAdmin方法是get()，异步操作。
子组件：

@Input() adminData;
ngOnInit() {
    let admin = adminData;
    console.log('admin');
}
ngAfterViewInit() {
    let admin = adminData;
    console.log('admin');
}

因为是异步操作，当加载网页的时候，子组件会先于父组件加载，导致子组件里的变量admin在没有获取到父组件传递的值之前就已经执行了，导致错误。
这样的问题，需要如何处理？

解决方案

manager.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';

@Injectable()
export class ManagerService {

    constructor(public http: Http) { }

    getPerson(): Observable<{ id: number; title: string; body: string }>{
        return this.http.get('https://jsonplaceholder.typicode.com/posts/1')
        .map(res => res.json());
    }
}

add-member.component.ts

import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';

@Component({
    selector: 'add-member',
    template: `
        <p>id：{{ adminData?.id}}</p>
    `
})
export class AddMemberComponent implements OnChanges{
 @Input() adminData: { id: number; title: string; body: string };

 ngOnChanges(changes: SimpleChanges) {
   if(changes['adminData'] && changes['adminData'].currentValue) {
     console.dir(changes['adminData'].currentValue);
   }
 }
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import {ManagerService} from "./manager.service";

@Component({
  selector: 'exe-app',
  template: `
   <add-member [adminData]="admin"></add-member>
  `
})
export class AppComponent implements OnInit {
  admin: { id: number; title: string; body: string };

  constructor(private managerService: ManagerService) { }

  ngOnInit() {
    this.managerService.getPerson().subscribe(
      res => this.admin = res
    );
  }
}

可以先看一下这篇文章 Angular 2 AsyncPipe，也可以使用AsyncPipe，但文中提到的问题，要注意一下哈。另外组件生命周期中各个钩子的作用及执行顺序也要去了解一下。

这篇关于angular2父子组件通讯 异步问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！