大牛's 筆記

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 的所有屬性

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>
  `

如果需要使用雙向綁定(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'
    };
}