共计 2021 个字符,预计需要花费 6 分钟才能阅读完成。
上面这段代码有什么用?
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 的值已胜利注入,并且组件曾经正确地获取了这些值。