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)

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

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

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页