Angulra2 View建立 with VS2015 - Step2. 快速建立
Step2. 快速建立
首先在 app.component.ts(AppComponent Class) 中建立一個Class:
title 屬性為"Tour of Heroes",hero 屬性為 "Windstorm"
//要export出去的Class
export class AppComponent {
title = 'Tour of Heroes';
hero = 'Windstorm';
}
接著新增一個 template 綁定到 @Component 中
template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
app.component.ts 完整程式碼及顯示結果如下:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'
})
export class AppComponent {
title = 'Tour of Heroes';
hero = 'Windstorm';
}
===================我是分隔線===================
接著建立一個 Hero Class,類別中有兩個屬性分別為 id 和 name
此段程式碼必須放在 app.component.ts 的最上層,import 的下方
export class Hero {
id: number;
name: string;
}
接著讓 AppComponent 的 hero 屬性繼承 Hero Class,然後給予初始值
hero: Hero = {
id: 1,
name: 'Windstorm'
};
AppComponent 的 hero 由字串改為一個物件,template 也必須跟著修改才可以顯示物件的 name 和 id
template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
app.component.ts 完整程式碼及顯示結果如下:
import { Component } from '@angular/core';
export class Hero {
id: number;
name: string;
}
@Component({
selector: 'my-app',
template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>'
})
export class AppComponent {
title = 'Tour of Heroes';
hero: Hero = {
id: 1,
name: 'Windstorm'
};
}
===================我是分隔線===================
使用以下的 template 可看到 Hero Class 的所有屬性
在TypeScript提供 ` (倒單引號)來連接字串,傳統單引號字串沒辦法做換行動作。
template:
`
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>
`
接著嘗試在 input 輸入框中編輯 name ,可替換以下程式碼
template:`
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input value="{{hero.name}}" placeholder="name">
</div>
`
由於此段寫法是屬於單向綁定(one-way binding),因此在 <input value="{{hero.name}}" placeholder="name"> 輸入資料並不會同步更新到 <h2> 中。
(相當於Angular1的ng-model)
(相當於Angular1的ng-model)
如果需要使用雙向綁定(two-way data binding)需將片段程式碼修改為
<input [(ngModel)]="hero.name" placeholder="name">
app.component.ts 完整程式碼及顯示結果如下:
import { Component } from '@angular/core';
export class Hero {
id: number;
name: string;
}
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name1: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
`
})
export class AppComponent {
title = 'Tour of Heroes';
hero: Hero = {
id: 1,
name: 'Windstorm'
};
}