使用 @Inject(PLATFORM_ID) 在 Angular 中识别当前平台

在 Angular 应用程序中，有时需要识别当前平台以执行特定操作。例如，需要在服务器端呈现网站时，就需要检测是否在 Node.js 平台上运行，而非在浏览器端进行客户端呈现。

为了实现这一需求，Angular 提供了 PLATFORM_ID 令牌，该令牌可以注入到组件或服务中，用于识别当前运行的平台。

使用方式

1. 导入 PLATFORM_ID 令牌

在组件或服务的 constructor 中导入 PLATFORM_ID 令牌：

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

constructor(
  @Inject(PLATFORM_ID) private platformId: Object
) { }

2. 获取当前平台

在组件或服务中，通过 isPlatformBrowser() 和 isPlatformServer() 方法来识别当前运行的平台。

import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import { Inject, PLATFORM_ID } from '@angular/core';

constructor(
  @Inject(PLATFORM_ID) private platformId: Object
) { }

ngOnInit() {
  if(isPlatformBrowser(this.platformId)) {
    console.log('在浏览器上运行');
  }
  if(isPlatformServer(this.platformId)) {
    console.log('在服务器端上运行');
  }
}

注意事项

1. PLATFORM_ID 令牌需要通过 @Inject 注入到组件或服务中，否则 Angular 将无法识别该令牌。
2. PLATFORM_ID 令牌的类型为 Object 类型，并不代表任何实际意义，只是为了区分注入到组件中的其他参数。
3. isPlatformBrowser(platformId: Object) 方法用于检测是否在浏览器端运行。
4. isPlatformServer(platformId: Object) 方法用于检测是否在服务器端运行。
5. 注意：在 Angular 12 及更高版本中，@angular/platform-browser-dynamic 模块已被取消。如果代码中引用了该模块，请立即删除，以避免潜在的编译错误。

以上就是使用 @Inject(PLATFORM_ID) 在 Angular 中识别当前平台的介绍。希望这个介绍对你有所帮助。