Angular 4 - 填充子组件数据的最佳方法-Java 学习之路

我在父组件中使用@ViewChild，而父组件依赖于子组件属性 . 现在，子组件从REST调用中获取数据，该调用在ngoninit中完成 . 在父组件中我使用了ngAfterViewInit以便我可以获取子组件的数据，但似乎在第一次初始化发生时调用ngAfterViewInit并且不查看对视图的任何后续更改（在第一次ngAfterContentChecked之后调用一次（）） . 类似下面的东西

子组件

@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);
      }
   }

现在的问题是

有没有办法检查并等待子组件完全呈现？
在父组件，子数据加载和父级中的后续逻辑中处理此类方案是否更好？但是通过这种方式，我们最终完全复制了所有父组件中的子组件数据负载
有没有更好的方法来做到这一点

3 回答

0

您应该将api调用之类的逻辑移动到服务中，并使用 rxjs/Subject 或 rxjs/BehaviorSubject 将结果数据存储在其中 .

或者，如果你想进一步将你的数据存储在像 @ngrx/store 这样的redux存储中以及 @ngrx/effects ，由于不可变数据和使用 ChangeDetectionStrategy.OnPush ，它具有很好的性能优势 . 此外，您的应用状态绝对可以在任何时间点降低副作用并提高可测试性 .

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

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

回复于 2024-04-26T15:18:36+08:00

您应该在子组件上使用输出 Launcher .

@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);
    }

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

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

回复于 2024-04-26T15:18:36+08:00

如果让父组件获取数据的超集，则可以更轻松地执行此操作 . 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.
    }

回复于 2024-04-26T15:18:36+08:00

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

3 回答

相关问题