如何使用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收到错误:

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

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上添加评论,因为适应最新的工具和技术非常重要:

如果你正在使用,angular-cli你可以打电话ng g class model,它会为你生成它.模型被任何你想要的命名所取代.

Answer 2

问题在于,你有没有添加Model到无论是bootstrap(这将使其成为一个单身),或在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) {}
}

是的,你应该Model在上面定义Component.但最好将它放在他自己的文件中.

但是,如果您希望它只是一个可以创建多个实例的类,那么最好使用它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

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

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

. .

在您的 component.ts 或 service.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 4

在你的情况下,你在同一页面上有模型,但你在Component类之后声明它,所以你需要使用它forwardRef来引用Class.不喜欢这样做,总是model在单独的文件中有对象.

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

此外,您必须更改视图插值以引用正确的对象

{{model?.param1}}

你应该做的更好的事情是,你可以让你的Model类在不同的文件中定义,然后在需要时将其导入.export在您的班级名称之前也有,以便您可以导入它.

import { Model } from './model';

Answer 5

我的代码是

    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>