本篇笔记将使用两种方法新建组件,实现如下功能:
手动创建
首先在src/app目录下新建文件,格式为【组件名.component.ts】,比如我的是courses.component.ts
在courses.component.ts文件中编写代码
import { Component } from '@angular/core';
@Component({
selector: 'courses', //<courses>
template: '<h2>Courses</h2>',
})
export class CoursesComponent {
}
在app.module.ts中把新增的组件添加进去
declarations: [
AppComponent,
CoursesComponent, //新增组件
],
添加后app.module.ts会自动导入新增的courses组件
import { CoursesComponent } from './courses.component';
如果你的编译器没有自动导入,建议安装Auto Import插件
使用Angular CLI创建
只需要在终端输入一条指令:
ng g c coursecli
出现以下内容则创建成功
CREATE src/app/coursecli/coursecli.component.html (24 bytes)
CREATE src/app/coursecli/coursecli.component.spec.ts (647 bytes)
CREATE src/app/coursecli/coursecli.component.ts (287 bytes)
CREATE src/app/coursecli/coursecli.component.css (0 bytes)
UPDATE src/app/app.module.ts (565 bytes)
我们可以看到已经创建完成了
这篇文章是学习笔记之一,用于记录学习的过程,以后笔记都将写的尽可能简洁,如果你喜欢或者对你有帮助,还请点一个小小的赞,谢谢支持!