Comment dois-je déclarer une classe de modèle dans ma Angulaire 2 composant à l'aide de la Machine?

Question

Je suis nouveau sur Angulaire 2 et Tapuscrits et je suis en train de suivre les meilleures pratiques.

Au lieu d'utiliser un simple JavaScript modèle ({ }), je suis d'essayer de créer un fichier d'enregistrement de la classe.

Cependant, Angulaire 2 ne semble pas comme elle.

Mon code est:

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

et je l'utilise comme:

import { testWidget} from "lib/testWidget";

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

J'obtiens une erreur Angulaire:

EXCEPTION: ne Peut pas résoudre tous les paramètres pour testWidget: (?).

Alors j'ai pensé, le Modèle n'est pas encore définie... je vais le déplacer vers le haut!

Sauf que maintenant j'ai accès à l'exception:

EXCEPTION d'ORIGINE: Pas de fournisseur de Modèle!

Comment puis-je y arriver??

Edit: Merci à tous pour la réponse. Il m'a conduit dans le droit chemin.

Afin d'injecter de la ce dans le constructeur, j'ai besoin de l'ajouter les fournisseurs sur le composant.

Cela semble fonctionner:

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

Answer 1

Je vais essayer ceci:

Diviser votre Modèle dans un fichier séparé appelé model.ts:

export class Model {
    param1: string;
}

L'importer dans votre composant. Cela vous donnera l'avantage supplémentaire d'être en mesure de l'utiliser dans d'autres composants:

Import { Model } from './model';

Initialiser le composant:

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

L'accès de manière appropriée dans le code html:

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

Je veux ajouter à la réponse d'un commentaire fait par @PatMigliaccio parce que c'est important de s'adapter aux dernières technologies et outils:

Si vous utilisez angular-cli vous pouvez appeler ng g class model et il va générer pour vous. modèle remplacé par ce que le nommage que vous désirez.

Answer 2

Le problème est que vous n'avez pas ajouté Model , soit l' bootstrap (ce qui permettra d'en faire un singleton), ou à l' providers tableau de votre définition de composant:

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

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

Et oui, vous devez définir Model au-dessus de l' Component. Mais le mieux serait de le mettre dans son propre fichier.

Mais si vous voulez qu'il soit simplement une classe à partir de laquelle vous pouvez créer plusieurs instances, il est préférable de simplement utiliser 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() {}
}

Answer 3

Dans votre cas, vous avez de modèle sur la même page, mais vous l'avez déclaré à l'issue de votre classe de Composant, de sorte que vous devez utiliser forwardRef pour désigner Class. Ne préfère pas le faire, toujours model objet dans un fichier distinct.

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

En outre, vous avez à vous changer la vue de l'interpolation pour se référer à l'objet correct

{{model?.param1}}

---

La meilleure chose que vous devriez faire est, vous pouvez avoir votre Model Classe de définir dans différentes fichier et l'importer ensuite comme un quand vous en avez besoin en faisant. Ont également export avant de vous le nom de la classe, de sorte que vous pouvez l'importer.

import { Model } from './model';

Answer 4

mon code est

    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 = "";
  }    
  }
}

et le code html qui va comme ceci :

<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>

Answer 5

Vous pouvez utiliser le angulaires-cli que les commentaires de @brendon la réponse de suggérer.

Vous pourriez aussi essayer de:

ng g class modelsDirectoy/modelName --type=model

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

Gardez à l'esprit: ng g class !== ng g c
Toutefois, vous pouvez utiliser ng g cl comme raccourci en fonction de votre angulaires-version cli.