Angular 如何使用 InjectionToken 的方式得到当前 location 信息

简介: Angular 如何使用 InjectionToken 的方式得到当前 location 信息
+关注继续查看

方法1:通过 Angular DOCUMENT injection token 获得

方法2:直接通过全局变量 location.


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


方法1的实现:

image.pngimage.png


如何消费这个 locationToken?

image.png

image.png

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


运行时的调用栈:

image.png


factory 函数执行的结果,是一个 Location 对象:


image.png

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


相关文章
|
1天前
|
网络架构
如何处理 Angular 单页面应用里的 a 标签,避免点击后重新加载整个应用
如何处理 Angular 单页面应用里的 a 标签,避免点击后重新加载整个应用
14 0
|
1天前
|
SEO
Angular SSR 应用的 SEO 实现一个例子 - meta 和 title 元素的赋值
Angular SSR 应用的 SEO 实现一个例子 - meta 和 title 元素的赋值
12 0
|
1天前
|
存储 缓存 JavaScript
基于 Angular 的企业级 Web 应用服务器端渲染的推荐建构
基于 Angular 的企业级 Web 应用服务器端渲染的推荐建构
26 0
基于 Angular 的企业级 Web 应用服务器端渲染的推荐建构
|
2天前
|
Web App开发 缓存 安全
Angular 应用要启用 Service Worker 所需满足的一些前提条件
Angular 应用要启用 Service Worker 所需满足的一些前提条件
28 2
|
2天前
|
缓存 JavaScript 前端开发
关于 Angular PWA 应用中的 ngsw.json 文件
关于 Angular PWA 应用中的 ngsw.json 文件
27 1
|
2天前
|
缓存 监控 API
Angular Universal 应用避免 SSR hang 的一些指导方针
Angular Universal 应用避免 SSR hang 的一些指导方针
22 0
如何从Angular的ActivatedRoute数据结构中获得运行时路由信息
如何从Angular的ActivatedRoute数据结构中获得运行时路由信息
174 0
如何从Angular的ActivatedRoute数据结构中获得运行时路由信息
如何处理Angular项目在Visual Studio Code打开报关于@Decorators的警告信息
如何处理Angular项目在Visual Studio Code打开报关于@Decorators的警告信息
如何处理Angular项目在Visual Studio Code打开报关于@Decorators的警告信息
|
JavaScript 前端开发
一段简单的JavaScript代码,模拟Angular数据绑定信息的解析和替换
一段简单的JavaScript代码,模拟Angular数据绑定信息的解析和替换
57 0
一段简单的JavaScript代码,模拟Angular数据绑定信息的解析和替换
|
JavaScript 前端开发
一段简单的JavaScript代码,模拟Angular数据绑定信息的解析和替换
一段简单的JavaScript代码,模拟Angular数据绑定信息的解析和替换
54 0
一段简单的JavaScript代码,模拟Angular数据绑定信息的解析和替换
推荐文章
更多