文件名和组件名遵循风格指南中的标准方式。
-
组件的类名应该是大驼峰形式,并且以
Component
结尾。 因此英雄详情组件的类名是HeroDetailComponent
。 -
组件的文件名应该是小写中线形式,每个单词之间用中线分隔,并且以
.component.ts
结尾。 因此HeroDetailComponent
类应该放在hero-detail.component.ts
文件中。
打开
app.module.ts
文件,并且从@angular/forms
库中导入符号FormsModule
。 然后把FormsModule
添加到@NgModule
元数据的imports
数组中,它是当前应用正在使用的外部模块列表。
这样才可以使用[(ngModule)]双向绑定
数据传递:
父组件:<hero-detail [hero]="selectedHero"></hero-detail> : 属性绑定,用于父组件模板给子组件传递数据
子组件:import{Component,Input}from'@angular/core';
exportclassHeroDetailComponent{@Input() hero:Hero;}
自定义组件:
按照风格指南创建组件文件名
导入{Component}
@componenr 装饰器 主要有2个 selector: ‘’ 组件标签
template:'' 样式模板
exprot class 按风格的组件名{
@input() //若从父组件接受数据需要导入input
}
在ngmodule中导入:import{HeroDetailComponent}from'./hero-detail.component';
声明组件名:declarations:[AppComponent,HeroDetailComponent],
OnInit 钩子使用:
在app.compoent.ts导入钩子模块 OnInit
在export里加入 implements OnInit {
//在里面设定 ngOnInit(): void { this.xxx()}
}