Angular 4-填充子组件数据的最佳方式

我在父组件中使用@ViewChild，父组件取决于子组件属性。现在，子组件从在ngoninit中完成的REST调用中获取数据。在父组件中，我使用了NgaAfterViewInit，以便能够获得子组件的数据，但是当第一次初始化发生时调用NgaAfterViewInit，并且没有查看任何后续视图更改（在第一个NgaAfterContentChecked（）之后调用一次）。像下面这样

子组件

    @Component({
      selector: "academicyear-detail",
    }) 
    export class AcademicYearDetail  {
      currentYear: string;
      ngOnInit() {
        //do a rest call
        //assign when data arrives
        currentYear = data.currentAcademicYear;
      }
    }

      @Component({
         selector: "testProject",
         templateUrl: "app/partials/Main.html",
         directives: [AcademicYearDetail] 
      })
      export class AppComponent { 
        @ViewChild(AcademicYearDetail) acadYearDetail:AcademicYearDetail;
        ngAfterViewInit() {
          this.getChildProperty();
        }
        getChildProperty() {
          console.log(this.acadYearDetail.currentYear);
        }
      }

父组件

    @Component({
      selector: "academicyear-detail",
    }) 
    export class AcademicYearDetail  {
      currentYear: string;
      ngOnInit() {
        //do a rest call
        //assign when data arrives
        currentYear = data.currentAcademicYear;
      }
    }

      @Component({
         selector: "testProject",
         templateUrl: "app/partials/Main.html",
         directives: [AcademicYearDetail] 
      })
      export class AppComponent { 
        @ViewChild(AcademicYearDetail) acadYearDetail:AcademicYearDetail;
        ngAfterViewInit() {
          this.getChildProperty();
        }
        getChildProperty() {
          console.log(this.acadYearDetail.currentYear);
        }
      }

现在的问题是

有没有办法检查并等待子组件完全呈现

在父组件、子组件中处理此类场景是否更好 父级中的数据加载和后续逻辑？但这样我们就完全失败了 复制所有父零部件中的子零部件数据加载

有没有更好的办法

---

您应该在子组件上使用输出发射器

   @Component({
      selector: "academicyear-detail",
    }) 
    export class AcademicYearDetail  {

     @Ouput()
     currentYear = new EventEmitter<string>();

     currentYear: string;
     ngOnInit() {
        //do a rest call
        //assign when data arrives
        this.currentYear.emit(currentAcademicYear);
    }

@组件({
选择器：“年度详细信息”，
}) 
导出类详细信息{
@输出（）
currentYear=新的EventEmitter（）；
本年度：字符串；
恩戈尼尼特（）{
//打个休息电话
//数据到达时分配
本.currentYear.emit（currentYear）；
}

然后在父组件的模板中设置变量

<academicyear-detail (currentYear)="acadYearDetail.currentYear = $event"></academicyear-detail>

---

您应该在子组件上使用输出发射器

   @Component({
      selector: "academicyear-detail",
    }) 
    export class AcademicYearDetail  {

     @Ouput()
     currentYear = new EventEmitter<string>();

     currentYear: string;
     ngOnInit() {
        //do a rest call
        //assign when data arrives
        this.currentYear.emit(currentAcademicYear);
    }

@组件({
选择器：“年度详细信息”，
}) 
导出类详细信息{
@输出（）
currentYear=新的EventEmitter（）；
本年度：字符串；
恩戈尼尼特（）{
//打个休息电话
//数据到达时分配
本.currentYear.emit（currentYear）；
}

然后在父组件的模板中设置变量

<academicyear-detail (currentYear)="acadYearDetail.currentYear = $event"></academicyear-detail>

---

如果让父组件获取数据的超集，您可能会更轻松地完成此操作。

主详细信息

模式本质上意味着子组件只接收它所需的数据，父组件可以缓存您的完整数据集，直到您需要它为止

要做到这一点，你可以在你的父母那里打剩余的电话

@Component({
         selector: "testProject",
         templateUrl: "app/partials/Main.html",
         directives: [AcademicYearDetail] 
       })
export class AppComponent { 
  constructor(private http: HttpClient) { }
  ngOnInit() {
     //do a get for everything
  }      
}

在子组件中，您只需要绑定

 @Component({
      selector: "academicyear-detail",
    }) 
    export class AcademicYearDetail  {
     currentYear: string;
     @Input() data;
     ngOnChanges() {
      //bind data to be used where ever in child.
    }

---

如果让父组件获取数据的超集，您可能会更容易地完成此操作。

Master Detail

模式本质上意味着子组件只接收它所需的数据，父组件可以缓存您的完整数据集，直到您需要它为止

要做到这一点，你可以在你的父母那里打剩余的电话

@Component({
         selector: "testProject",
         templateUrl: "app/partials/Main.html",
         directives: [AcademicYearDetail] 
       })
export class AppComponent { 
  constructor(private http: HttpClient) { }
  ngOnInit() {
     //do a get for everything
  }      
}

在子组件中，您只需要绑定

 @Component({
      selector: "academicyear-detail",
    }) 
    export class AcademicYearDetail  {
     currentYear: string;
     @Input() data;
     ngOnChanges() {
      //bind data to be used where ever in child.
    }

---

您应该将类似api调用的逻辑移动到服务中，并使用

rxjs/Subject

或

rxjs/BehaviorSubject

将结果数据存储在其中

或者，如果您想进一步将数据存储在redux存储中，如以及，由于数据不可变和的使用，这对性能有很大的好处。此外，您的应用程序状态在任何时间点都是明确的，这可以减少副作用并提高可测试性

这将使您的逻辑远离组件，并且该服务可以在任何需要共享数据的组件中使用

---

有关共享应用程序数据的服务的更多信息，请参见的教程部分。

您应该将类似api调用的逻辑移动到服务中，并使用

rxjs/Subject

或

rxjs/BehaviorSubject

将生成的数据存储在其中

或者，如果您想进一步将数据存储在redux存储中，如以及，由于数据不可变和的使用，这对性能有很大的好处。此外，您的应用程序状态在任何时间点都是明确的，这可以减少副作用并提高可测试性

这将使您的逻辑远离组件，并且该服务可以在任何需要共享数据的组件中使用

---

有关共享应用程序数据的服务的更多信息，请参阅的教程部分。

谢谢，但通过这种方式，我们必须在每个父对象中获取该子对象所属的数据。如果子对象对父对象是多对多的，则可以将其集中到具有行为子对象的服务中，因此数据状态始终是单例的……谢谢，但采用这种方式我们必须在每个父对象中获取该子对象所属的数据，如果子对象对父对象是多对多的，您可以将其集中到具有行为子对象的服务中，以便数据状态始终为单态。。。