Question

我有一个打字稿类如下：

export class ImageItem{
    constructor(public Id: number, public ImageUrl: string, public Caption: string, public Description: string, private _sanitizer: DomSanitizer)
    {
    }
}

所有构造函数的参数都是与该类相关的属性，但最后一项是注入我的类的类。我的问题是，如果我想创建这个类的对象，我想做一些如下的事情：

var a=new ImageItem(1, 'image1', 'http://aaa.com/aa.jpg', '')

但由于注入的项目，它给了我一个错误。我想知道如何解决这个问题。

Answer 1

您需要的是工厂服务，该服务能够创建此类类的实例，同时注入您想要注入的属性。

它看起来像这样。

image-item.ts 定义了一个简单的类：

import { DomSanitizer } from '@angular/platform-browser';

export class ImageItem {
    constructor(public Id: number, public ImageUrl: string, public Caption: string, 
                  public Description: string, private _sanitizer: DomSanitizer) {
    }
}

工厂是注入 DomSanitizer 的注射服务，并且有一种能够创建 ImageItem 实例的方法。

import { Injectable } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { ImageItem } from './image-item';

@Injectable()
export class ImageItemFactoryService {

  constructor(private domSanitizer: DomSanitizer) { }

  public createImageItem(id: number, description: string) {
    return new ImageItem(id, '', '', description, this.domSanitizer);
  }
}

app.component.ts 将工厂作为提供者导入，并使用它来创建 ImageItem 的实例。

import { Component } from '@angular/core';
import { ImageItem } from './image-item';
import { ImageItemFactoryService } from './image-item-factory.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ImageItemFactoryService]
})
export class AppComponent {
  private item: ImageItem = null;
  constructor(public imageItemFactory: ImageItemFactoryService) {
    this.item = imageItemFactory.createImageItem(1, 'something');
  }
}

在angularjs（1）中，可以使用注射器来创建实例，同时可以在注射过程中使用一些局部值。

在angular（2）中， Injector 服务不再提供该功能。

具有多个参数和注入项的TypeScript构造函数

1 个答案: