2018-10-11

1.app.component.ts - 组件的类代码
2.app.component.html - 组件的模板
3.app.component.css - 组件的私有CSS样式

Augulay CLI 命令

创建组件

创建一个名为heroes的新组件

ng generate component heroes

@Component装饰器函数，用于该组件指定Angular所需的元数据。
CLI自动生成三个元数据属性：
1.selector - 组件的选择器（CSS元素选择器）
2.templateUrl - 组件模板文件的位置
3.styleUrls - 组件私有CSS样式表文件的位置

HeroesComponent类文件如下：

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

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    // 生命周期钩子，初始化逻辑
  }

}

• 使用 *ngFor 显示列表
• 使用 *ngIf 根据条件包含或排除一段HTML
• 使用 class 绑定切换CSS的样式类
• 使用属性绑定语法让父组件可以控制子组件
• 使用 @Input 装饰器

创建服务