具有多个参数和注入项的TypeScript构造函数 [英] TypeScript Constructor with multiple parameters and an injected item

问题描述

我有一个打字稿课，如下:

I have a typescript class as below:

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

所有构造函数的参数都是与该类相关的属性，但最后一项是注入到我的类中的类.我的问题是，如果要创建此类的对象，则需要执行以下操作:

all the constructor's parameters are properties that are related to that class but the last item is a class which is injected into my class. My problem is if I want to create an object of this class I want to do something as below:

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

但是由于注入的物品，它给了我一个错误.我想知道如何解决这个问题.

But it gives me an error because of the injected item. I was wondering how I should solve this issue.

推荐答案

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

What you need is a factory service that is able to create instances of this kind of class and at the same time injects the properties you would like to have injected.

它看起来像这样.

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

The image-item.ts defines a simple class:

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 实例的方法.

The factory is an injectable service that injects the DomSanitizer and has a method able to create instances of 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 的实例.

The app.component.ts imports the factory as a provider and uses it to create instances of 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)中，可以使用注入器来创建实例，并且可以同时给出一些在注入期间要使用的局部值.

In angularjs(1) it was possible to use the injector in order to create an instance and it was possible at the same time to give some local values to be used during injection.

使用尖角(2)，但是 Injector 服务不再提供了该功能.

In angular (2) however the Injector service no longer provides that functionality.

这篇关于具有多个参数和注入项的TypeScript构造函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！