TypeScriptを使用してAngular 2コンポーネントでモデルクラスを宣言するにはどうすればよいですか？

Question

私はAngular 2とTypeScriptが初めてで、ベストプラクティスに従っています。

単純なJavaScriptモデル（{}）を使用する代わりに、TypeScriptクラスを作成しようとしています。

しかし、角2はそれを好まないようです。

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

と私はそれを使用しています：

私のコードがある

例外：：私は角度からのエラーを取得しています

import { testWidget} from "lib/testWidget"; 

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

することはできませんtestWidget：（？）のすべてのパラメータを解決します。

私はモデルがまだ定義されていないと思った...私はそれを上に移動します！今除き

私は例外を取得：

元の例外：モデルなしのプロバイダ！

これをどのようにして達成できますか？

編集：すべての回答に感謝します。それは私を正しい道に導いた。

これをコンストラクタに挿入するには、コンポーネントのプロバイダに追加する必要があります。

これが動作するように表示されます：あなたのケースで

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

私はこれを試してみた：

は

がと呼ばれる別のファイルにあなたのモデルを分割：

export class Model { 
    param1: string; 
} 

インポートそれあなたのコンポーネントに。それを適切なHTMLで

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

アクセス：

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

コンポーネントに

Import { Model } from './model'; 

初期化：これは、他のコンポーネントで使用することができるというあなたに追加の利益を与えます@PatMigliaccioのコメントを追加するには、最新のツールと技術に適応することが重要です。

angular-cliをご利用の場合は、ng g class modelに電話すると、あなたのために生成されます。モデルはあなたが望むどんな名前でも置き換えられます。

Answer 2

あなたが同じページ上のモデルを持っているが、あなたはそれがあなたのComponentクラスの後に宣言持っているので、それはあなたがClassを参照するためにforwardRefを使用する必要があります。 これをやりたいとは思わない、常に別のファイルにmodelオブジェクトがある。あなたがあなたを変更する必要がさらに

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

あなたがやるべきオブジェクト

{{model?.param1}} 

---

を修正するために参照するために補間を見るよりよい事はあなたがあなたのModelクラスは、その後、別のファイル&に定義することができ、ありますあなたがそれを要求するときにそれをインポートします。また、クラス名の前にexportがあるので、インポートすることができます。

import { Model } from './model'; 

Answer 3

問題は（それシングルトン行います）あなたはbootstrapのいずれかにModelを追加していないことにあり、またはお使いのコンポーネント定義のproviders配列に：

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

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

そして、はい、 Componentの上にModelを定義する必要があります。しかし、それを自分のファイルに入れる方が良いでしょう。

しかし、複数のインスタンスを作成できるクラスにしたい場合は、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 4

私のコード

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

あるとhtmlはこのように書きます：

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