$ 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 

@NgModule({
 declarations: [
 AppComponent,
 SimpleFormComponent
 ],
 ...
})
export class AppModule { }

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'
　　　　}
　　}
}

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

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

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

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

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