TypeScript Constructor with multiple parameters and an injected item

Question

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.

If the class needs a DomSanitizer to work correctly, why aren't you passing one? And if it doesn't need a DomSanitizer, why does the constructor expect one? That's what you should wonder. — JB Nizet
– JB Nizet, Commented Aug 19, 2017 at 11:55
Because It is an injected object. I don't want somebody who using ImageItem to consider it. — Nick Mehrdad Babaki
– Nick Mehrdad Babaki, Commented Aug 19, 2017 at 11:59
No. Angular injects services, but not data like description or caption. And that doesn't change anything to my question. If you don't pass it when creating the object, and it needs it to work, all you'll have is an object that will not behave as it should. — JB Nizet
– JB Nizet, Commented Aug 19, 2017 at 12:15
And if this object is supposed to be created and injected by Angular, then you shouldn't create it youself. — JB Nizet
– JB Nizet, Commented Aug 19, 2017 at 12:19

toskv · Accepted Answer · 2017-08-19 12:49:09Z

15

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.

It would look something like this.

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) {
    }
}

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

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

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.

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

edited Aug 19, 2017 at 12:49

answered Aug 19, 2017 at 12:38

toskv

31.8k7 gold badges77 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Fraga Over a year ago

is there any better solution nowadays?

toskv Over a year ago

@Fraga nope. This is prettty much the standard way of doing it in any OOP language, I dont think you'll find a better way.

Fraga Over a year ago

So, I'm undestanding then, that is not a best practices to put logic in models. In that case is preferable to place all the logic in a services and inside that service call all the services you need and fill the model rigth?

toskv Over a year ago

Yes. Models should hold state. You can have a look at Redux(ngrx-store) for an example of this.

Collectives™ on Stack Overflow

TypeScript Constructor with multiple parameters and an injected item

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related