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

【问题标题】：Angular 6 How to load Service before App Component loads?Angular 6 如何在应用组件加载之前加载服务？
【发布时间】：2019-02-27 19:01:03
【问题描述】：

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

【问题讨论】：

你能分享你的代码吗？
Angular2: How to load data before rendering the component?的可能重复

标签： angular typescript

【解决方案1】：

您可以在数据服务中使用解析器：

您可以在路由中添加resolve 属性。
在您的服务中实现解析接口并添加解析方法。
只需订阅组件中的 observable 服务即可。

Take a reference from angular.io

【讨论】：

【解决方案2】：

您可以在路由器中使用解析。

点击下方链接

https://www.techiediaries.com/angular-router-resolve/

https://angular.io/api/router/Resolve

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

如果你使用 HttpClient 获取数据，你需要订阅流，因为它返回 observable

this.MyService.method().subscribe(value => {
  //  you can use value here
});

或者你可以在模板中使用异步管道

// controller
value$ = this.MyService.method()

// template
<p>{{value$ | async}}</p>

除此之外，您还可以通过 APP_INITIALIZER 令牌将您的服务工厂注册到 Angular 提供程序中，并且您的函数将在应用程序初始化时执行。

@NgModule({
  ...
  providers: [
    { provide: APP_INITIALIZER, useFactory: initSomething, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

【讨论】：

{ 提供：APP_INITIALIZER, useFactory: initSomething, multi: true } ..... 在这个 useFactory 加载整个 MyService ts 文件？还是 MyService 中只有一种方法？，如果它加载一种方法，我如何加载多种方法？
你可以有一个 main 函数来调用所有的嵌套方法并解析 promise，这里是一个例子hackernoon.com/…

【解决方案5】：

也许在任何其他组件之前加载服务的更简单方法是将其添加为 Angular 应用的 AppComponent 的参数

export class AppComponent {
      constructor(private myService: MyService) {}
...
}

如果你想在服务的构造上做任何调用，那就是它的构造函数的作用

【讨论】：