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

Question

我是Angular 2和TypeScript的新手，我正在尝试遵循最佳实践。

我试图创建一个TypeScript类，而不是使用简单的JavaScript模型({ })。

但是，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 的错误：

异常:无法解析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 Car {
  id: number;
  make: string;
  model: string;
  color: string;
  year: Date;

  constructor(car) {
      {
        this.id = car.id;
        this.make = car.make || '';
        this.model = car.model || '';
        this.color = car.color || '';
        this.year = new Date(car.year).getYear();
      }
  }
}

对于非常复杂的数据对象，||对于不存在的默认数据非常有用。

. .

在组件中。ts或服务。ts文件，您可以将响应数据反序列化到模型中：

// Import the car model
import { Car } from './car.model.ts';

// If single object
car = new Car(someObject);

// If array of cars
cars = someDataToDeserialize.map(c => new Car(c));

Answer 2

问题在于您尚未将 Model 添加到引导程序（这将使它成为单例）或组件定义的提供程序数组中：

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

我会试试这个：

将您的模型拆分到一个名为< code>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的评论，因为适应最新的工具和技术很重要：

如果您使用的是< code>angular-cli，您可以调用< code>ng g class model，它会为您生成。模型被替换成你想要的名字。