为模型类使用注入令牌的角度DI

Question

我正在尝试在这里做一些事情，但不确定是否能做到。我想创建一个这样的模型类：

import { Inject } from '@angular/core';
import {
Element,
Image,
} from '@situlive/situ-angular-components/contentful';
export class ImageColumn {
title: string;
backgroundImage: Image;
backgroundImageAlignment: string;
constructor(
element: Element
) {
this.title = element.fields.title;
this.backgroundImageAlignment = element.fields.backgroundImageAlignment;
}
}

这样，在组件或服务中，我只需执行new ImageColumn(element)，它就会为我绑定属性。到目前为止很容易。

现在我有一个复杂的问题：(我需要绑定backgroundImage，这是通过服务完成的。我将构造函数更新为：

import { Inject } from '@angular/core';
import {
ContentfulService,
Element,
Image,
} from '@situlive/situ-angular-components/contentful';
export class ImageColumn {
title: string;
backgroundImage: Image;
backgroundImageAlignment: string;
constructor(
contentfulService: ContentfulService,
element: Element
) {
this.title = element.fields.title;
this.backgroundImageAlignment = element.fields.backgroundImageAlignment;
this.backgroundImage = this.contentfulService.createImage(
element.fields.backgroundImage[0]
);
}
}

这很好，但它会引起一个问题，因为现在我在任何使用ImageColumn的地方都必须传入contentfulService。我真的很希望能够在不需要在构造函数中提供服务的情况下传递服务。

我以前用注入令牌的服务做过这件事，所以我想我可以在这里做。我创建了一个像这样的注入令牌：

import { InjectionToken } from '@angular/core';
import { ContentfulService } from '@situlive/situ-angular-components/contentful';
export const CONTENTFUL_SERVICE = new InjectionToken<ContentfulService>(
'CONTENTFUL_SERVICE'
);

我在我的模块中提供了这样的：

@NgModule({
imports: [
CommonModule,
HttpClientModule,
RouterModule,
AuthModule.forRoot(environment.auth0),
ContentfulModule.forRoot(environment.contentful),
],
declarations: [FooterComponent, HeaderComponent],
exports: [FooterComponent, HeaderComponent],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: BearerInterceptor,
multi: true,
},
{
provide: CONTENTFUL_SERVICE,
useClass: ContentfulService,
multi: true,
},
],
})
export class CoreModule {}

所以我想我可以对我的模型做这件事：

import { Inject } from '@angular/core';
import {
ContentfulService,
Element,
Image,
} from '@situlive/situ-angular-components/contentful';
import { CONTENTFUL_SERVICE } from '../contentful-service.token';
export class ImageColumn {
title: string;
backgroundImage: Image;
backgroundImageAlignment: string;
constructor(
@Inject(CONTENTFUL_SERVICE) private contentfulService: ContentfulService,
element: Element
) {
this.title = element.fields.title;
this.backgroundImageAlignment = element.fields.backgroundImageAlignment;
this.backgroundImage = this.contentfulService.createImage(
element.fields.backgroundImage[0]
);
}
}

问题是，现在当我做new ImageColumn(element)时，它抱怨我需要2个参数，但只有1个。有人知道我该怎么做吗？

Answer 1

我认为它不能以这种方式工作，因为您没有为ImageColumn声明任何提供程序。声明提供程序将使注入器知道如何在注入ImageColumn时获得依赖项，如下所示：

constructor (imageColumn: ImageColumn) { } 

但由于您想手动实例化它，我不确定您能否让Angular知道如何自动解析注入令牌。

相反，我认为您可以在实例化ImageColumn时提供Injector。

foo.component.ts

export class FooComponent {
constructor (private injector: Injector) { }
ngOnInit () {
const imgColumn = new ImageColumn(element, this.injector)
}
}

然后在ImageColumn的构造函数中，您可以注入任何已声明提供者的内容，包括该服务：

class ImageColumn {
constructor (private element: any, private injector: Injector) {
this.contentfulService = this.injector.get(ContentfulService);
/* ... */
this.backgroundImage = this.contentfulService.createImage(
element.fields.backgroundImage[0]
);
}
}