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) {}
}
sembra più carino, grazie reto –
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
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. –