2016-07-15 152 views
36

Sono nuovo in Angular 2 e TypeScript e sto cercando di seguire le best practice.Come posso dichiarare una classe modello nel mio componente Angular 2 usando TypeScript?

Invece di utilizzare un semplice modello JavaScript ({}), sto tentando di creare una classe TypeScript.

Tuttavia, Angular 2 non sembra gradirlo.

Il mio codice è:

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

e sto usando come:

import { testWidget} from "lib/testWidget"; 

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

sto ricevendo un errore dal angolare:

ECCEZIONE: Impossibile risolvere tutti i parametri per testWidget: (?).

Così ho pensato, Modello non è ancora stato definito ... lo sposterò verso l'alto!

Eccetto che ora ottengo l'eccezione:

eccezione originale: Nessun provider per il modello!

Come posso realizzare questo?

Modifica: Grazie a tutti per la risposta. Mi ha portato sulla strada giusta.

Per inserirlo nel costruttore, è necessario aggiungerlo ai provider sul componente.

Questo sembra funzionare:

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

risposta

66

Mi piacerebbe provare questo:

dividere il modello in un file separato chiamato :

export class Model { 
    param1: string; 
} 

importarlo nel componente. Questo vi darà il vantaggio di essere in grado di utilizzarlo in altri componenti:

Import { Model } from './model'; 

inizializzazione nel componente:

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

accesso in modo appropriato nel codice HTML:

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

Voglio aggiungere alla risposta un commento fatto da @PatMigliaccio perché è importante adattarsi agli strumenti e alle tecnologie più recenti:

Se si utilizza angular-cli è possibile chiamare ng g class model e lo genererà per voi. il modello viene sostituito con qualunque denominazione tu desideri.

+1

sembra più carino, grazie reto –

+1

Interessante ... Se provo a fare la stenografia del costruttore (modello privato: Modello), ottengo l'errore dicendo No Provider. Tuttavia, se lo definisco come modello privato: Model = new Model(), funziona. Perchè è questo? – Scottie

+6

Non sono un architetto Angular 2, ma in base alla mia esperienza con Angular quando si introduce qualcosa nel costruttore che si sta insinuando viene iniettato. L'iniezione richiede di aggiungerla a @Component come provider come tale: 'provider: [Modello]'. Inoltre, come per la demo di Angular 2 Tour of Hero, dovresti semplicemente utilizzarlo come una proprietà invece di un iniettabile, in quanto tale funzionalità è solitamente riservata a classi più complesse come i servizi. –

5

Nel tuo caso si hanno modello sulla stessa pagina, ma lo avete dichiarato dopo la vostra classe Component, in modo che è necessario utilizzare forwardRef per riferirsi a Class. Non preferire questo, avere sempre l'oggetto model in un file separato.

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

Inoltre è necessario cambiare la visualizzazione di interpolazione per fare riferimento per correggere oggetto

{{model?.param1}} 

meglio cosa da fare è, si può avere la Model Classe definire in diversi file di & poi importalo come quando lo richiedi facendo. Avere anche export prima del nome della classe, in modo da poterlo importare.

import { Model } from './model'; 
+0

Ti manca che il suo modello sembra sbagliato. –

+0

@ BrendonColburn: hai ragione. Fisso. – Scottie

+0

@ BrendonColburn grazie amico, l'ho visto nella tua risposta. quindi ho pensato che non ci fosse alcun significato per modificare la mia risposta dopo, grazie per l'heads up, evviva :) –

11

Il problema sta che non hai aggiunto Model sia al bootstrap (che lo renderà un Singleton), o alla providers serie di vostra definizione del 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) {} 
} 

E sì, dovresti definire Model sopra lo Component. Ma meglio sarebbe metterlo nel suo file.

Ma se si desidera che sia solo una classe da cui è possibile creare più istanze, è meglio utilizzare solo 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() {} 
} 
+1

Il modello è solo una classe, l'importazione dovrebbe funzionare idealmente. perché ne abbiamo bisogno nella matrice 'providers'? –

+0

Sì, ma i suoi modelli non funzionerebbero qui, sarebbe model.param1. Inoltre, non gli ha dato un valore iniziale? –

+0

@PankajParkar Perché ottengo ancora un 'Nessun fornitore per modello' se non lo aggiungo all'array dei provider – PierreDuc

3

il mio codice è

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

e il codice html va in questo modo:

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