Angular笔记：新建组件（手动创建和指令创建）

本篇笔记将使用两种方法新建组件，实现如下功能：

手动创建

首先在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)

 我们可以看到已经创建完成了

这篇文章是学习笔记之一，用于记录学习的过程，以后笔记都将写的尽可能简洁，如果你喜欢或者对你有帮助，还请点一个小小的赞，谢谢支持！