角度2：将数据传递到Presentation组件的智能组件

Question

I have set up where I have a smart component that ngOnInit uses a service to call out to a Rest API to fetch an object of data.

That data is passed into the presentation (child) component through an @Input() property.

In the presentation component, I need to repack the data into a bit of a different model so that it fits into the 3rd party component I am using for presentation.

I am not 100% how to deal with that fact that in the ngOnInit of the presentatioin component, the passed in @Input property is still undefined . Since the actual data is a Rest API call, the parent (smart) component will only get it in the subscribe 's observer, ie, asynchronously.

How do I hook this up together such that I am not trying to manipulate an undefined object, but wait until it's actually there in the presentation component?

I guess, I can always link the presentation component to the smart parent component through @ViewChild and then introduce a public method on the presentation component like showData(data) , but I am wondering what the best practice is here.

Answer 1

In the child component you have to listen for changes to the input. Once the data input has changed and has data. You can then repack it into another property.

In this example the input data gets assigned to repacked . Notice the *ngIf in the template to prevent the use of the third party stuff until the data is ready.

@Component({
    selector: 'child',
    tempalte: '<div *ngIf="repacked"><!-- third-party stuff --></div>'
})
export class ChildComponent implements OnChanges {
   @Input()
   public data: Object;

   public repacked: Object;

   public ngChanges(changes: SimpleChanges): void {
      if('data' in changes) {
           this.repack(changes['data'].currentValue);
      }
   }

   private repack(data: Object) {
       if(data) {
          this.repacked = data; // <-- do repacking work here
       }
   }
}

Answer 2

There is actually quite some answers online for this already. Have a look at https://scotch.io/tutorials/3-ways-to-pass-async-data-to-angular-2-child-components

I reviewed your case and although it's hard to understand without knowing exactly what you do. I solved this by initializing my variable in the Smart Component:

private apiData: Array = [];

Using *ngIf in my template, and then repacking the data in the child if I have the data:

@Input('apiData') apiData: <any>;

ngOnInit(): void {
    this.repack();
}

repack(): void {
    // here is the part that prevents errors
    if(! this.apiData) return;

    // repack logic here
}

However @ThinkingMedia answer is likely the more correct one in your case.