class - 如何使用 TypeScript 在 Angular 2 组件中声明模型类？

Question

我是 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: Can't resolve all parameters for testWidget: (?).

所以我想，模型还没有定义......我会把它移到顶部!

除了现在我得到了异常(exception):

ORIGINAL EXCEPTION: No provider for Model!

我如何完成这个？？

编辑:感谢大家的回答。它让我走上了正确的道路。

为了将它注入(inject)到构造函数中，我需要将它添加到组件的提供程序中。

这似乎有效:

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

我会试试这个:

将您的模型拆分为一个名为 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>"
})

我想在答案中添加 @PatMigliaccio 发表的评论因为适应最新的工具和技术很重要:

If you are using angular-cli you can call ng g class model and it will generate it for you. model being replaced with whatever naming you desire.