[解決済み] Angular 2のコンポーネントでTypeScriptを使ってモデルクラスを宣言するにはどうしたらいいですか？

質問

私はAngular 2とTypeScriptの初心者で、ベストプラクティスに従おうとしています。

単純なJavaScriptのモデル({ })を使う代わりに、TypeScriptのクラスを作ろうとしています。

しかし、Angular 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]
})

Angularからエラーが出ています。

EXCEPTION: testWidgetのすべてのパラメータを解決できません。(?).

ということで、Modelはまだ定義されていないんだなぁ・・・と思いました。一番上に移動させちゃおうかな～。

ただし、今度は例外が発生しました。

元の例外: Model のプロバイダがありません!

どうすればこれを達成できますか？

編集：皆さん、回答ありがとうございました。 正しい道に導いてくれました。

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

これはうまくいくように見えます。

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

どのように解決するのですか？

これを試してみる。

モデルを model.ts :

export class Model {
    param1: string;
}

それをあなたのコンポーネントにインポートしてください。そうすることで、他のコンポーネントで使えるようになるという利点があります。

Import { Model } from './model';

コンポーネントで初期化する。

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

htmlの中で適切にアクセスする。

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

によるコメントを答えに加えたいと思います。 パット・ミリアッチョ というのも、最新のツールや技術に適応することが重要だからです。

もしあなたが angular-cli を呼び出すことができます。 ng g class model を呼び出すと、それを生成してくれます。モデルは、あなたが望むどんな名前にも置き換えられます。