angular - 我如何让 Angular 5 等待 Injectable 的构造函数中使用的 Promise 在构造依赖项或 ngOnInit 之前解析？

Question

我的 Angular 5 项目中有一项服务包含一些配置状态:

@Injectable
export class FooService {

    isIncognito: boolean = null;

    constructor() {

        // I want Angular to wait for this to resolve (i.e. until `isIncognito != null`):
        FooService.isIncognitoWindow()
            .then( isIncognito => {

                this.isIncognito= isIncognito;
            } );
    }


    private static isIncognitoWindow(): Promise<boolean> {
    // https://stackoverflow.com/questions/2909367/can-you-determine-if-chrome-is-in-incognito-mode-via-a-script
    // https://developer.mozilla.org/en-US/docs/Web/API/LocalFileSystem

        return new Promise<boolean>( ( resolve, reject ) => {

            let rfs = window['requestFileSystem'] || window['webkitRequestFileSystem'];
            if( !rfs ) {
                console.warn( "window.RequestFileSystem not found." );
                resolve( false );
            }

            const typeTemporary = 0;
            const typePersistent = 1;

            // requestFileSystem's callbacks are made asynchronously, so we need to use a promise.
            rfs(
                /*type: */ typeTemporary,
                /* bytesRequested: */ 100,
                /* successCallback: */ function( fso: WebKitFileSystem ) {

                    resolve( false );
                },
                /* errorCallback: */ function( err: any /* FileError */ ) {

                    resolve( true );
                }
            );
        } );
    }
}

此服务被我项目中的许多组件使用，并作为构造函数参数传递。例如:

@Component( {
    moduleId: module.id,
    templateUrl: 'auth.component.html'
} )
export class AuthComponent implements OnInit {

    constructor( private fooService: FooService ) {
    }

    ngOnInit(): void {

        // do stuff that depends on `this.fooService.isIncognito != null`
    }
}

理想情况下，我希望 Angular 等待 FooService::isIncognitoWindow() promise 在注入(inject) FooService 之前先解决(解决立即发生，但不是同步发生)进入其他组件。

替代解决方案正在改变 FooComponent.isIncognito的属性为 Promise<boolean>并再次解决并调用 ngOnInit 的其余部分通过回调，但这意味着每个组件都会导致再次调用 promise 的主要函数 - 因此这意味着可能将其更改为缓冲的 Observable 或 Subject，这变得不必要地复杂 - 所有这些都是为了一个 boolean值(value)。它还意味着重构大量我不想做的代码。

Answer 1

您可以做的是使用 APP_INITIALIZER token 来确保您的 FooService 在应用程序启动之前被初始化。使用下面的代码，只有在 load 方法返回的 promise 已解决时，angular 才会启动应用程序。

FooService.ts

@Injectable()
export class FooService {

    isIncognito: boolean = null;

    public load()// <=== the method to be called and waited on during initialiation
  {
      return FooService.isIncognitoWindow().then(isIncognito =>
      {
        this.isIncognito = isIncognito;
      });

  }

    private static isIncognitoWindow(): Promise<boolean> {
    { //your method here

app.module.ts

export function loadFooService(fooService: FooService): Function 
{
  return () => { return fooService.load() }; 
}


@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],

  providers: [ FooService,
  { provide: APP_INITIALIZER, useFactory:loadFooService , deps: [FooService], multi: true },]
})

参见 stackblitz example