写点什么

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

作者:Jerry Wang
  • 2023-05-02
    上海
  • 本文字数:1360 字

    阅读完需:约 4 分钟

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/apiSERVER_REQUEST_ORIGIN: http://example.com
复制代码


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

发布于: 刚刚阅读数: 2
用户头像

Jerry Wang

关注

🏆InfoQ写作平台-签约作者🏆 2017-12-03 加入

SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使。2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。工作中使用 ABAP, Java, JavaScript 和 TypeScript 进行开发。

评论

发布
暂无评论
Angular 服务器端渲染两个相关的 SERVER_REQUEST_URL 和 SERVER_REQUEST_ORIGIN_前端开发_Jerry Wang_InfoQ写作社区