¿Cómo declaro una clase modelo en mi componente 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 de JavaScript simple ({}), estoy intentando crear una clase de TypeScript.

Sin embargo, a Angular 2 no parece gustarle.

Mi codigo 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]
})

Recibo un error de Angular:

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

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

Intentaría esto:

Divida su modelo en un archivo separado llamado model.ts:

export class Model {
    param1: string;
}

Importarlo a su componente. Esto le 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";
   }
}

Acceda a él apropiadamente en el html:

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

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

Si está utilizando angular-cli, puede llamar ng g class modely lo generará por usted. modelo siendo reemplazado por el nombre que desee.

El problema radica en que no ha agregado Modelni a bootstrap(lo que lo convertirá en un singleton) ni a la providersmatriz de la definición de su 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í, debe definir por Modelencima de Component. Pero mejor sería ponerlo en su propio archivo.

Pero si desea que sea solo una clase desde la que puede crear múltiples instancias, es mejor que use 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() {}
}

En su caso, tiene el modelo en la misma página, pero lo tiene declarado después de su clase Componente, por lo que debe usarlo forwardRefpara hacer referencia Class. No prefiera hacer esto, siempre tenga el modelobjeto en un archivo separado.

export class testWidget {
    constructor(@Inject(forwardRef(() => Model)) private service: Model) {}
}

Además, debe cambiar la interpolación de vista para hacer referencia al objeto correcto

{{model?.param1}}

Lo mejor que debe hacer es que puede hacer que su ModelClase se defina en un archivo diferente y luego importarlo cuando lo necesite. También tenga exportantes su nombre de clase, para que pueda importarlo.

import { Model } from './model';

mi codigo es

    import { Component } from '@angular/core';

class model {
  username : string;
  password : string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})



export class AppComponent {

 username : string;
 password : string;
  usermodel = new model();

  login(){
  if(this.usermodel.username == "admin"){
    alert("hi");
  }else{
    alert("bye");
    this.usermodel.username = "";
  }    
  }
}

y el html es así:

<div class="login">
  Usernmae : <input type="text" [(ngModel)]="usermodel.username"/>
  Password : <input type="text" [(ngModel)]="usermodel.password"/>
  <input type="button" value="Click Me" (click)="login()" />
</div>

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 a datos predeterminados que no existen.

. .

En su archivo component.ts o service.ts, puede deserializar los datos de 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));

Puede usar el angular-cli como sugieren los comentarios en la respuesta de @ brendon.

Quizás también quieras probar:

ng g class modelsDirectoy/modelName --type=model

/* will create
 src/app/modelsDirectoy
 ├── modelName.model.ts
 ├── ...
 ...
*/

Tenga en cuenta ng g class :! == ng g c
Sin embargo, puede usarlo ng g clcomo atajo dependiendo de su versión de angular-cli.

Me doy cuenta de que esta es una pregunta algo más antigua, pero solo quería señalar que ha agregado la variable del modelo a su clase de widget de prueba de manera incorrecta. Si necesita una variable de modelo, no debería intentar pasarla a través del constructor del componente. Solo tiene la intención de aprobar servicios u otros tipos de inyectables de esa manera. Si está creando una instancia de su widget de prueba dentro de otro componente y necesita pasar un objeto de modelo como, le recomendaría usar el núcleo angular OnInit y los patrones de diseño de entrada / salida.

Como ejemplo, su código realmente debería verse así:

import { Component, Input, OnInit } from "@angular/core";
import { YourModelLoadingService } from "../yourModuleRootFolderPath/index"

class Model {
    param1: string;
}

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

export class testWidget implements OnInit {
    @Input() model: Model; //Use this if you want the parent component instantiating this
        //one to be able to directly set the model's value
    private _model: Model; //Use this if you only want the model to be private within
        //the component along with a service to load the model's value
    constructor(
        private _yourModelLoadingService: YourModelLoadingService //This service should
        //usually be provided at the module level, not the component level
    ) {}

    ngOnInit() {
        this.load();
    }

    private load() {
        //add some code to make your component read only,
        //possibly add a busy spinner on top of your view
        //This is to avoid bugs as well as communicate to the user what's
        //actually going on

        //If using the Input model so the parent scope can set the contents of model,
        //add code an event call back for when model gets set via the parent
        //On event: now that loading is done, disable read only mode and your spinner
        //if you added one

        //If using the service to set the contents of model, add code that calls your
        //service's functions that return the value of model
        //After setting the value of model, disable read only mode and your spinner
        //if you added one. Depending on if you leverage Observables, or other methods
        //this may also be done in a callback
    }
}

Una clase que es esencialmente solo una estructura / modelo no debe inyectarse, porque significa que solo puede tener una instancia compartida única de esa clase dentro del alcance que se proporcionó. En este caso, eso significa que el inyector de dependencias crea una única instancia de Model cada vez que se crea una instancia de testWidget. Si se proporcionara a nivel de módulo, solo tendría una instancia compartida entre todos los componentes y servicios dentro de ese módulo.

En su lugar, debe seguir las prácticas estándar orientadas a objetos y crear una variable de modelo privado como parte de la clase, y si necesita pasar información a ese modelo cuando crea una instancia de la instancia, debe ser manejada por un servicio (inyectable) proporcionado por el módulo padre. Así es como se pretende que tanto la inyección de dependencia como la comunicación se realicen en angular.

Además, como algunos de los otros mencionaron, debe declarar sus clases modelo en un archivo separado e importar la clase.

Recomendaría encarecidamente volver a la referencia de documentación angular y revisar las páginas básicas sobre las diversas anotaciones y tipos de clases: https://angular.io/guide/architecture

Debe prestar especial atención a las secciones sobre módulos, componentes y servicios / inyección de dependencia, ya que son esenciales para comprender cómo usar Angular a nivel arquitectónico. Angular es un lenguaje de arquitectura muy pesada porque es de muy alto nivel. La separación de preocupaciones, las fábricas de inyección de dependencia y el control de versiones de javascript para la comparabilidad del navegador se manejan principalmente por usted, pero debe usar la arquitectura de su aplicación correctamente o encontrará que las cosas no funcionan como espera.

cree model.ts en su directorio de componentes como se muestra a continuación

export module DataModel {
       export interface DataObjectName {
         propertyName: type;
        }
       export interface DataObjectAnother {
         propertyName: type;
        }
    }

luego, en su componente, importe arriba como, importe {DataModel} desde './model';

export class YourComponent {
   public DataObject: DataModel.DataObjectName;
}

su DataObject debe tener todas las propiedades de DataObjectName.