¿Cómo declaro una clase de modelo en mi componente de Angular 2 usando TypeScript?

Soy nuevo en Angular 2 y TypeScript y estoy tratando de seguir las mejores prácticas.

En lugar de usar un modelo simple de JavaScript ({ }), estoy intentando crear una clase de TypeScript.

Sin embargo, a Angular 2 no parece gustarle.

Mi código es:

import { Component, Input } from "@angular/core";

@Component({
    selector: "testWidget",
    template: "<div>This is a test and {{model.param1}} is my param.</div>"
})

export class testWidget {
    constructor(private model: Model) {}
}

class Model {
    param1: string;
}

y lo estoy usando como:

import { testWidget} from "lib/testWidget";

@Component({
    selector: "myComponent",
    template: "<testWidget></testWidget>",
    directives: [testWidget]
})

Estoy recibiendo un error de Angular:

EXCEPCIÓN: No se pueden resolver todos los parámetros para testWidget: (?).

Así que pensé, el Modelo aún no está definido... ¡Lo moveré a la parte superior!

Excepto que ahora obtengo la excepción:

EXCEPCIÓN ORIGINAL: ¡No hay proveedor para Model!

¿Cómo logro esto?

Editar: Gracias a todos por la respuesta. Me llevó al camino correcto.

Para inyectar esto en el constructor, necesito añadirlo a los proveedores en el componente.

Esto parece funcionar:

import { Component, Input } from "@angular/core";

class Model {
    param1: string;
}

@Component({
    selector: "testWidget",
    template: "<div>This is a test and {{model.param1}} is my param.</div>",
    providers: [Model]
})

export class testWidget {
    constructor(private model: Model) {}
}

Respuesta #1

Yo intentaría esto:

Divide tu Modelo en un archivo separado llamado model.ts:

export class Model {
    param1: string;
}

Impórtalo en tu componente. Esto te dará el beneficio adicional de poder usarlo en otros componentes:

Import { Model } from './model';

Inicializar en el componente:

export class testWidget {
   public model: Model;
   constructor(){
       this.model = new Model();
       this.model.param1 = "your string value here";
   }
}

Accédelo adecuadamente en el HTML:

@Component({
      selector: "testWidget",
      template: "<div>This is a test and {{model.param1}} is my param.</div>"
})

Quiero añadir a la respuesta un comentario hecho por @PatMigliaccio porque es importante adaptarse a las últimas herramientas y tecnologías:

Si estás usando angular-cli, puedes llamar a ng g class model y esto lo generará por ti. 'model' se reemplaza con cualquier nombre que desees.

Respuesta #2

El problema radica en que no has añadido Model ni al bootstrap (lo que lo hará un singleton), ni al array providers de la definición de tu componente:

@Component({
    selector: "testWidget",
    template: "<div>This is a test and {{param1}} is my param.</div>",
    providers : [
       Model
    ]
})

export class testWidget {
    constructor(private model: Model) {}
}

Y sí, deberías definir Model antes del Component. Pero sería mejor ponerlo en su propio archivo.

Pero si quieres que sea solo una clase de la que puedas crear múltiples instancias, será mejor que simplemente uses new.

@Component({
    selector: "testWidget",
    template: "<div>This is a test and {{param1}} is my param.</div>"
})

export class testWidget {

    private model: Model = new Model();

    constructor() {}
}

Respuesta #3

export class Car {
  id: number;
  make: string;
  model: string;
  color: string;
  year: Date;

  constructor(car) {
      {
        this.id = car.id;
        this.make = car.make || '';
        this.model = car.model || '';
        this.color = car.color || '';
        this.year = new Date(car.year).getYear();
      }
  }
}

El || puede volverse muy útil para objetos de datos muy complejos frente a datos predeterminados que no existen.

. .

En tu archivo component.ts o service.ts puedes deserializar los datos de la respuesta en el modelo:

// Import the car model
import { Car } from './car.model.ts';

// If single object
car = new Car(someObject);

// If array of cars
cars = someDataToDeserialize.map(c => new Car(c));