新建组件

$ 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 { }

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:

};

// ...

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