ngOnInit 不等待构造函数服务调用

Question

I'm doing a API call on a constructor of a component.

apiResult = [];
constructor(
        private router: Router,
        private applicationServices: ApplicationService,
        private location: Location,
    ) {
        this.applicationServices.getAppConfig().subscribe(
           result => {
              this.apiResult = result;
           }

Then on ngOnInit i want to use that information example:

ngOnInit() {
  console.log('Selected App');
  console.log(this.apiResult );
}

However its reading the ngOnInit before the service on the constructor finish. So the result of "apiResult" is undefined.

What options do i have and whats the best way to do this? If possible can you provide an example.

Thanks in advance.

Answer 1

While developing Angular applications, I'd suggest keeping constructors clean and just to manage dependencies.

This is what I'd recommend doing:

export class Lol {
    apiResult = [];

    constructor(
        private router: Router,
        private applicationServices: ApplicationService,
        private location: Location,
    ) { }

    ngOnInit() {
        this.applicationServices
            .getAppConfig()
            .pipe(
                tap(result => {
                    console.log('Selected App');
                    console.log(result);
                })
            )
            .subscribe(result => {
                this.apiResult = result;
            })
    }
}

Call service in ngOnInit() and just tap result before subscribing to it, this is a rxjs operator used to do side effects and console.log is exactly that.

Update

I'd recommend against subscribing to observables manually at all, better use async pipe to do that. This way you'll avoid possible memory leaks and will let angular manage subscriptions for you.

That'd be component file:

export class LolComponent {
  apiResult$: Observable<any[]>;

  constructor(
    private router: Router,
    private applicationServices: ApplicationService,
    private location: Location
  ) {}

  ngOnInit() {
    this.apiResult$ = this.applicationServices.getAppConfig().pipe(
      tap((result) => {
        console.log("Selected App");
        console.log(result);
      })
    );
  }
}

That'd be the template:

<div class="container" *ngIf="(apiResult$ | async) as apiResult">
    {{ apiResult | json }}
</div>

Answer 2

The actual reason is that the dependencies (parameters of your constructor) is injected and component itself is instanced. During adding this component to the DOM, various life cycle functions execute depending on some situations.

Another thing is that your .getAppConfig() returns an Observable which is an asynchronous function. Here the function .getAppConfig() will execute in your constructor but at the same time ngOnInit() also executes. So Obviously, the this.apiResult will be empty at that time because assigning of values to this array is not done yet.

So, the solution could be:

apiResult = [];
constructor(
        private router: Router,
        private applicationServices: ApplicationService,
        private location: Location,
    ) {   }

ngOnInit(){
 this.applicationServices.getAppConfig()
       .subscribe(result => {
              this.apiResult = result;
              consoloe.log(this.apiResult);
       });
}

Here as all suggests, keep the constructor definition clean for best practices.

You can read about async and normal function differences. Also, most importantly, Observables.