angular4-自定義組件

在 Angular 中，咱們可使用 {{}} 插值語法實現數據綁定。

新建組件

$ ng generate component simple-form --inline-template --inline-style
# Or
$ ng g c simple-form -it -is # 表示新建組件，該組件使用內聯模板和內聯樣式
//會自動爲simple-form生成simple-form.component.ts文件，文件中的selector爲：app-simple-form,自動添加了app-前綴

輸出:
installing component
  create src/app/simple-form/simple-form.component.spec.ts // 用於單元測試
  create src/app/simple-form/simple-form.component.ts // 新建的組件
  update src/app/app.module.ts //Angular CLI 會自動更新 app.module.ts 文件。把新建的組件添加到 NgModule 的 declarations 數組中

app.module.ts更新後：
@NgModule({
  declarations: [
    AppComponent,
    SimpleFormComponent
  ],
  ...
})
export class AppModule { }

 

建立 UserComponent 組件

import { Component } from '@angular/core';

@Component({ // 裝飾器來定義組件的元信息
  selector: 'sl-user',
  template: `
    <h2>你們好，我是{{name}}</h2>
    <p>我來自<strong>{{address.province}}</strong>省,
      <strong>{{address.city}}</strong>市
    </p>Component

　　 <p>{{address | json}}</p>//Angular 內置的 json 管道，來顯示對象信息json

`, }) 

//定義組件類

export class UserComponent { 

　　name = 'name'; 
　　address = { province: 'province', city: 'city' } 
}


//使用構造函數初始化數據

export class UserComponent { name: string; address: any; constructor() { this.name = 'name'; this.address = { province: 'province', city: 'city' } } }

//接口使用

interface Address { province: string; city: string; }

}export class UserComponent { name: string; address: Address; constructor(){
　　　　this.name = 'name';
　　　　this.address = {
　　　　　　province: 'province',
　　　　　　city: 'city'
　　　　}
　　}

定義數據接口（ TypeScript 中的接口是一個很是靈活的概念，除了可用於對類的一部分行爲進行抽象之外，也經常使用於對「對象的形狀（Shape）」進行描述。）

interface Person {
  name: string;
  age: number;
}

let semlinker: Person = {
  name: 'semlinker',
  age: 31
};

聲明 UserComponent 組件

// ...
import { UserComponent } from './user.component';//載入
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, UserComponent],//聲明
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

在AppComponent中使用 UserComponent 組件 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <sl-user></sl-user> //UserComponent 的 selector
  `,
})
export class AppComponent {}