Angular 如何使用 InjectionToken 的方式得

方法1：通过 Angular DOCUMENT injection token 获得
方法2：直接通过全局变量 location.

第二种方式在 SSR 模式下不工作。

方法1的实现：

import { DOCUMENT } from '@angular/common';
import { inject, InjectionToken } from '@angular/core';

export const locationToken: InjectionToken<Location> =
  new InjectionToken('Location API', {
    factory: (): Location => {
      console.log("Jerry location token is injected!");
      return inject(DOCUMENT).location;
    },
    providedIn: 'root',
  });

如何消费这个 locationToken？

import { Component, Inject } from '@angular/core';

import { locationToken } from './location.token';

@Component({
  selector: 'browser-url',
  templateUrl: './url.component.html',
})
export class UrlComponent {
  get url() {
    console.log("jerry: ", location.href);
    return this.location.href;
  }

  constructor(
    @Inject(locationToken) private location: Location,
  ) {}
}

代码第16行必须加上 @Inject, 因为这不是一个基于类的依赖注入。

运行时的调用栈：

factory 函数执行的结果，是一个 Location 对象：

使用如下代码比较全局变量 location 和通过依赖注入得到 的 Location 对象，发现其实就是同一个实例。

更多Jerry的原创文章，尽在："汪子熙":