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

r3plica

我正在尝试在这里做某事，但不确定是否可以完成。我想创建一个这样的模型类：

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;
    }
}

这样一来，我就可以在组件或服务中执行a 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个参数。有人知道我该如何解决？

安德烈·盖特伊（AndreiGătej）

我认为这是行不通的，那是因为你没有宣布任何提供的ImageColumn。声明提供程序将使注入程序知道在注入时如何获取依赖关系ImageColumn，如下所示：

constructor (imageColumn: ImageColumn) { }

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

我认为您可以做的是Injector在实例化时提供ImageColumn。

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]
    );
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。