Angular2 / Typescript對象和屬性綁定到模板

Question

注意：我想知道正確的方法或更多
_____________________________________________________________________
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，

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 <div>My name is {{user.name}} & I'm {{user.age}} year(s) old. </div >

我們可以直接創建具有值的屬性的對象嗎？

我知道TypeScript主要與type有關。

但想知道是否還有其他東西，以及是否有人知道某些東西。

如果您想展示一些東西，您可以使用這個塞子： Plunker

Answer 1

您還可以在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
};

所以我想說，您可以自由地做自己想做的事;-)

有關詳細信息，請參閱此問題：

• 打字稿強類型化-指定對象值類型