组件的意义

组件通常控制着视图中的一块区域。
一个大型应用都是由小型、独立和可复用的组件构成。
本质上，组件是一个带有 @Component 装饰器的类。

组件的结构

import { Component, OnInit } from '@angular/core';
import { APIService } from './common/service/api.service';

@Component({
  // 组件选择器，当在模板中使用该标签时，就会把该组件创建在那里
  selector: 'app-root',

  // 引入组件 html 模板
  templateUrl: './app.component.html',

  // 引入组件 css 文件(可引入多个)
  styleUrls: ['./app.component.scss'],

  // 用于向本组件提供服务，会与组件一同创建和销毁
  // 如果组件所在的模块中已经注入该服务，则可以省略
  providers:[ APIService ]
})

// 为模板提供数据和方法支持
export class AppComponent implements OnInit {

  // 构造函数，通常在这里创建服务实例
  constructor() {
    private api: APIService
  }
  
  // 生命周期函数
  ngOnInit(){ }

}

组件的使用

组件必须在模块中声明之后，才可以正常使用。

@NgModule({
  declarations: [ AppComponent ]
})

end