Angular 服务器端渲染两个相关的 SERVER_REQUEST_URL 和 SERVER_REQUEST_ORIGIN

下面这段代码有什么用？

export class AppModule {
  constructor(
    @Optional() @Inject(SERVER_REQUEST_URL) protected serverRequestUrl?: string,
    @Optional() @Inject(SERVER_REQUEST_ORIGIN) protected serverRequestOrigin?: string
  ) {
    console.log({ serverRequestUrl, serverRequestOrigin });
  }
}

SERVER_REQUEST_URL 和 SERVER_REQUEST_ORIGIN 这两个 injection token 在实际的 Angular 项目中有什么用？

这段代码定义了一个名为 AppModule 的 Angular 模块，并在其构造函数中注入了两个依赖项（依赖注入）：SERVER_REQUEST_URL 和 SERVER_REQUEST_ORIGIN。

依赖注入是一种常见的设计模式，用于管理组件、服务、模块等之间的依赖关系。在 Angular 中，依赖注入通过注入令牌（Injection Token）来实现。

在这段代码中，@Inject() 装饰器用于指定注入令牌，@Optional() 装饰器用于标记这两个依赖项是可选的，即如果找不到对应的提供者，程序也不会报错。构造函数中的 console.log() 语句用于在控制台输出这两个依赖项的值，以便在开发过程中进行调试和测试。

在实际的 Angular 项目中，SERVER_REQUEST_URL 和 SERVER_REQUEST_ORIGIN 这两个注入令牌通常用于处理服务器端渲染（server-side rendering）相关的逻辑。SERVER_REQUEST_URL 用于获取当前请求的 URL 地址，SERVER_REQUEST_ORIGIN 用于获取请求的源地址。通过这些注入令牌，我们可以在组件、服务等中获取当前请求的相关信息，以便进行更灵活的业务逻辑处理。

在实际的 Angular 项目中，可以通过在模块的 providers 中提供对应的值来注册 SERVER_REQUEST_URL 和 SERVER_REQUEST_ORIGIN 这两个注入令牌。下面是一个示例：

import { InjectionToken } from '@angular/core';

export const SERVER_REQUEST_URL = new InjectionToken<string>('SERVER_REQUEST_URL');
export const SERVER_REQUEST_ORIGIN = new InjectionToken<string>('SERVER_REQUEST_ORIGIN');

@NgModule({
  // ...
  providers: [
    { provide: SERVER_REQUEST_URL, useValue: 'http://example.com/api' },
    { provide: SERVER_REQUEST_ORIGIN, useValue: 'http://example.com' },
  ]
})
export class AppModule { }

在上面的示例中，我们通过 providers 属性提供了 SERVER_REQUEST_URL 和 SERVER_REQUEST_ORIGIN 的值。假设我们在一个组件中注入了这两个令牌，并打印出它们的值，代码如下：

import { Component, Inject } from '@angular/core';
import { SERVER_REQUEST_URL, SERVER_REQUEST_ORIGIN } from './app.module';

@Component({
  selector: 'app-root',
  template: `SERVER_REQUEST_URL: {{ serverRequestUrl }}<br>SERVER_REQUEST_ORIGIN: {{ serverRequestOrigin }}`
})
export class AppComponent {
  constructor(
    @Inject(SERVER_REQUEST_URL) public serverRequestUrl: string,
    @Inject(SERVER_REQUEST_ORIGIN) public serverRequestOrigin: string
  ) { }
}

当应用程序运行时，如果我们在控制台中查看组件输出的值，可能会看到类似如下的内容：

SERVER_REQUEST_URL: http://example.com/api
SERVER_REQUEST_ORIGIN: http://example.com

这表明 SERVER_REQUEST_URL 和 SERVER_REQUEST_ORIGIN 的值已成功注入，并且组件已经正确地获取了这些值。