乐趣区

关于前端:Angular-InjectionToken-APPINITIALIZER-multi-标志位不同值的情况讨论

jiezi

下图是 SAP 电商云 Spartacus UI 中的一段和 Site Context 解决逻辑相干的代码：

export const contextServiceProviders: Provider[] = [
  BaseSiteService,
  LanguageService,
  CurrencyService,
  {
    provide: APP_INITIALIZER,
    useFactory: initializeContext,
    deps: [ConfigInitializerService, SiteContextRoutesHandler],
    multi: true,
  },
];

留神第 40 行的标记位，multi，默认值为 false，这意味着在代码后注册的 initializer 的实现，会笼罩掉先注册的 initializer provider 实现。换言之，这种状况下，APP_INITIALIZER 的 provider 只能有一个。

如果 multi: true 被设置，那么新的提供者会被增加到之前注册的提供者中，使得一个令牌的提供者不止一个。当这个令牌被调用时，angular 会执行所有这些令牌。

[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传 (img-t9CQg0dA-1657529948839)(https://upload-images.jianshu…)]

因而，开发人员能够应用 multi: true 来创立 multi Provider 令牌。这意味着咱们能够创立多个函数 / 服务，并在初始化期间调用它。

做一个测试，别离创立两个 initializer 的实现：


export function initializeApp2() {return (): Promise<any> => {return new Promise((resolve, reject) => {console.log(`initializeApp2 called`);
      setTimeout(() => {console.log(`initializeApp2 Finished`);
        resolve();}, 2000);
    });
  };
}

而后应用 multi：true 给同一个 Injection Token APP_INITIALIZER 注册两个不同的 provider：

  providers: [ 
    AppInitService,
    {provide: APP_INITIALIZER,useFactory: initializeApp1, deps: [AppInitService], multi: true},
    {provide: APP_INITIALIZER,useFactory: initializeApp2, multi: true}
  ],

最初运行时，这两个 initializers 会同时失去触发。

另外，这个例子应用了 useFactory 为 Injection Token 注册 provider.

一个例子：

const WINDOW = new InjectionToken<Window>('A reference to the window object', {factory: () => window,
});

下面的例子，应用工厂函数作为提供者来设置 InjectionToken，就如同它是在应用程序的根注入器中显式定义的一样。当初咱们能够在应用程序的任意地位应用它：

@Component({selector: 'my-app'})
export class AppComponent {constructor(@Inject(WINDOW) window: Window) {}}

咱们能够应用 inject 函数，在工厂函数的执行环境里，来获取其余提供者的援用。让咱们看另一个例子：

import {inject, InjectionToken} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

export type TimespanProvider = Observable<string>;

export const TIMESPAN = new InjectionToken('Subscribe to timespan query param', {factory() {const activatedRoute = inject(ActivatedRoute);

    return activatedRoute.queryParams.pipe(pluck('timespan'),
      filterNil(),
      distinctUntilChanged());
  },
});

下面的例子，咱们注入 ActivatedRoute，应用 inject 取得其 provider 实例，并为时间跨度查问参数返回一个 observable. 将 Observable<String> 导出成新的类型别名：TimespanProvider.

这个 Injection Token 的注入例子：

@Component({selector: 'app-home'})
export class HomeComponent implements OnInit {constructor(@Inject(TIMESPAN) private timespan$: TimespanProvider) {}

  ngOnInit() {this.timespan$.pipe(untilDestroyed(this)).subscribe(console.log);
  }
}

另一个例子：咱们有一个 ThemeService 实现类，将用户以后的 Theme 值裸露进来：

@Injectable({providedIn: 'root'})
export class ThemeService {private theme = new Subject<string>();
  theme$ = this.theme.asObservable();

  setTheme(theme: string) {this.theme.next(theme);
  }
}

Component 读取以后 Theme 的值：

@Component({
  selector: 'app-hello',
  template: `<h1>{{theme$ | async}}</h1>`
})
export class HelloComponent {
  theme$: Observable<string>;

  constructor(private themeService: ThemeService) {}

  ngOnInit() {this.theme$ = this.themeService.theme$;} 

}

采取 Injection Token 的实现形式：

export type ActiveThemeProvider = Observable<string>;
export const ACTIVE_THEME = new InjectionToken<ActiveThemeProvider>('Active theme', {factory() {return inject(ThemeService).theme$;
  }
});

首先定义一个新的 Type，而后应用 factory 办法，返回 Observable<string> 类型的后果。

退出移动版