在 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({ //Component 裝飾器來定義組件的元信息 selector: 'sl-user', template: `  <h2>大家好，我是{{name}}</h2>  <p>我來自<strong>{{address.province}}</strong>省,   <strong>{{address.city}}</strong>市  </p>　　 <p>{{address | json}}</p>//Angular 內置的 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 {}