在使用选择器加载组件之前预取数据

时间:2019-09-13 10:26:10

标签: angular

我有一个独特组件的模块,该组件具有自己的routingModule和resolver,可以从后端预取数据。 在组件的ngOnInit()中,我获得了在路由中传递的数据以填写表格。因此,如果我用它的路由来称呼它,它就可以工作。

问题是我还希望能够通过其选择器在另一个外部模块的组件内加载它,并且仍然在加载之前预取数据。

我得到的自然解决方案是在ngOnInit中执行此操作:

ngOnInit() {
  if(comingFromRoot()) {
   this.route.data.subscribe(
     (data: {contactData: any}) => {
      ...
     }     
   );
  } else {
    this.backend.getContactData().subscribe( () => ... );
  }
}

有没有更好的解决方案?

1 个答案:

答案 0 :(得分:0)

在这种情况下,您可以使用ngIf,例如您的父组件html

<your-componenet *ngIf="data" [data]="data"></your-component>

在您的componenet中获取数据作为输入

  @Input() data:any;
  ngOnInit() {
      if(!data) {
      this.route.data.subscribe((data: {contactData: any}) => {
      ...
      });
   }

并在您的父组件中。

data:any;

//following in constructur or ngoninit
this.backend.getContactData().subscribe( (data) => this.data=data );