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 装饰器
