Angular 6 如何在应用程序组件加载之前加载服务？

Question

我正在我的数据服务中获取 JSON 对象值，但所有组件都在我的数据服务加载之前加载。因此，当我从组件调用服务方法时，我得到了未定义的值。

Answer 1

我假设您正在使用路由器访问您的页面，因此您可以简单地使用“解析器”功能:RouterLink 描述。

path: 'app', component: AppPage, resolve: { myData : DataResolve }

在这里，我们要求解析变量“myData”，这要归功于解析器 DataResolve。 DataResolve 是一个简单的 Injectable 实现 Resolve 接口(interface):

import { Resolve } from '@angular/router';
import { Injectable } from '@angular/core';

@Injectable()
export class UserResolve implements Resolve<any> {

  constructor(private myService: MyService) {}

  async resolve() {
    const myData= await this.myService.getMyData().toPromise();
    return myData;
  }

}

然后当值被解析时，组件将被加载。您可以从 ActivatedRoute 获取数据:

 import { ActivatedRoute } from '@angular/router';

 constructor(private route: ActivatedRoute {
    this.route.data.subscribe(() => {
      this.data = this.route.snapshot.data.myData;
    });
  }