Angular2 / Typescript对象和属性绑定到模板

时间:2016-02-19 12:13:35

标签: typescript angular

注意:我想知道更正确的方式或更多内容
_____________________________________________________________________ 的 ANGULAR1

angular1 中,我们可以执行以下操作。

$scope.user={};
$scope.user.name="micronyks";
$scope.user.age="27";

或直接喜欢

$scope.user={name:"micronyks",age:"27"}

绑定到模板看起来像,

<div>My name is {{user.name}} & I'm {{user.age}} year(s) old. </div>


______________________________________________________________________
ANGULAR2

angular2 中使用 Typescript

models.ts

export class LoginModel()
{
  private name:string;
  private age:number;
}

app.ts

import {LoginModel} from '../models.ts';

user=new LoginModel()
constructor()
{
   this.user.name="micronyks"
   this.user.age="27"
}

app.html

<div>My name is {{user.name}} & I'm {{user.age}} year(s) old. </div&GT;

我们可以直接用属性(ies)创建一个带有值的对象吗?

我知道TypeScript主要关注type

但是想知道是否有其他东西存在,如果有人深入了解某事。

如果你想展示一些东西,你可以使用这个羽毛球:Plunker

1 个答案:

答案 0 :(得分:0)

您也可以使用Angular2中的文字对象,如Angular1。由于Angular2可以与TypeScript一起使用,因此您可以利用其强类型。这样,您可以指定属性和参数的类型。现在检查不可行,如果使用了不正确的类型,这样可以获得类型错误。

import {LoginModel} from '../models.ts';

export class Test {
  user:LoginModel = new LoginModel()

  constructor() {
    this.user.name = 'micronyks';
    this.user.age = 27;

    this.someMethod(this.user);
  }

  someMethod(user:LoginModel) {
    // ...
  }
}

另一点与依赖注入有关,因为Angular2可以依赖类型来知道要注入哪个实例......否则你需要使用@Inject

IDE中也存在影响。如果您定义类型而不是类型或any,则可以完成。

事实上,甚至可以混合使用东西:

interface INumbersOnly {
  [key: string]: number;
}

var x: INumbersOnly = {
  num: 1, // works fine
  str: 'x' // will give a type error
};

所以我会说你可以自由地做你想做的事情; - )

有关详细信息,请参阅此问题: