如何使用TypeScript在Angular 2组件中声明模型类? [英] How do I declare a model class in my Angular 2 component using TypeScript?

问题描述

我是Angular 2和TypeScript的新手，我正在尝试遵循最佳做法.

I am new to Angular 2 and TypeScript and I'm trying to follow best practices.

我没有使用简单的JavaScript模型({})，而是尝试创建TypeScript类.

Instead of using a simple JavaScript model ({ }), I'm attempting to create a TypeScript class.

但是，Angular 2似乎不喜欢它.

However, Angular 2 doesn't seem to like it.

我的代码是:

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收到一个错误:

I'm getting an error from Angular:

例外:无法解析testWidget的所有参数:(?).

EXCEPTION: Can't resolve all parameters for testWidget: (?).

所以我想，尚未定义模型...我将其移到顶部！

So I thought, Model isn't defined yet... I'll move it to the top!

除了现在我得到了例外:

Except now I get the exception:

原始例外:没有提供模型的人！

ORIGINAL EXCEPTION: No provider for Model!

我该怎么做?

谢谢大家的回答.它引导我走了正确的路.

Thanks to all for the answer. It led me to the right path.

为了将其注入到构造函数中，我需要将其添加到组件上的提供程序中.

In order to inject this into the constructor, I need to add it to the providers on the component.

这似乎起作用:

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的单独文件:

Split your Model into a separate file called model.ts:

export class Model {
    param1: string;
}

将其导入您的组件.这将使您能够在其他组件中使用它.

Import it into your component. This will give you the added benefit of being able to use it in other components:

Import { Model } from './model';

在组件中初始化:

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

在html中适当地访问它:

Access it appropriately in the html:

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

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

I want to add to the answer a comment made by @PatMigliaccio because it's important to adapt to the latest tools and technologies:

如果您正在使用angular-cli，则可以调用ng g class model，它将为您生成它.该模型将替换为您想要的任何名称.

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.

这篇关于如何使用TypeScript在Angular 2组件中声明模型类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！