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

问题描述：

我是Angular 2和TypeScript的新手，我试图遵循最佳实践。如何使用TypeScript在我的Angular 2组件中声明模型类？

而不是使用简单的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] 
})

我碰到角的错误：

EXCEPTION：不能解决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) {} 
}

答

我想试试这个：

拆分模型到名为一个单独的文件：

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，它会为您生成。模型被替换为你想要的任何命名。

看起来更漂亮，谢谢reto –

有趣......如果我尝试做构造函数（私有模型：模型）的速记，我得到错误说没有提供者。但是，如果我将其定义为私有模型：Model = new Model（），它就可以工作。为什么是这样？ – Scottie

我不是Angular 2的架构师，但是基于我对Angular的经验，当你通过构造函数携带某些东西时，你暗示它被注入。注入要求您将其作为提供者添加到@Component中，例如：'providers：[Model]'。同样按照Hero演示的Angular 2 Tour，你应该将它作为一个属性而不是可注入的属性，因为该功能通常被保留用于更复杂的类，例如服务。 –

答

在您在同一页上的型号你的情况，但你拥有了它你的组件类后宣布，所以这是你需要使用forwardRef指Class。 不喜欢这样做，总是有model对象在单独的文件中。

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

另外，你必须改变你查看插指正确的对象

{{model?.param1}}

你应该做的更好的事情是，你可以有你Model类在不同的文件&定义，然后将它作为您在需要时进行导入。在课程名称前也有export，以便您可以导入它。

import { Model } from './model';

你错过了，他的模板看起来是错误的。 –

@BrendonColburn：你说得对。固定。 – Scottie

@BrendonColburn谢谢你，我在你的答案中看到了。所以我认为没有任何意义，编辑我的答案后，谢谢男人的头虽然，欢呼:) –

答

问题在于，你有没有添加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) {} 
}

是的，你应该在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() {} 
}

模型只是一个类，导入应理想工作。为什么我们需要它在'providers'数组中？ –

是的，但他的模板在这里不起作用，它会是model.param1。另外，他还没有给它一个初始值？ –

@PankajParkar因为如果我没有将它添加到提供程序数组中，我仍然会得到一个'No Provider for Model' – PierreDuc

答

我的代码是

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>

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

相关推荐