方法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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Angular 如何使用 InjectionToken 的方式得到当前 location 信息的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。