原标题：[Angular组件开发系列]如何写一个 Button 组件

最近一直在整理 Angular 的项目总结，这篇我们看看如何写一个 Button 组件。

1、自动创建一个 button 组件

ngg component button

src/app 目录下面会多出来一个文件夹 button：

2、打开 button.component.ts ：

对外导出类，名为 ButtonComponent 这里用到了 implements

export classButtonComponentimplementsOnInit{ constructor { } ngOnInit: void{ } }

先加上 @Component 装饰器

@Component({ selector: 'app-button', templateUrl: './button.component.html', styleUrls: ['./button.component.css'] })

这里面还有一个 ngOnInit

它是 Angular 的组件生命周期 只调用一次 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后 初始化指令/组件

上面 2 个均来自 @angular/core

import{ Component, OnInit } from'@angular/core';

我们通过 @Input 增加输入属性

@Inputround: boolean= false;

我们在模板里面：

<app-button[round]="true">新视野</app-button>

对应我们可以在 button 的模板 html 里面：

<button[class.is-round]="round"> <ng-content></ng-content> </button>

编译之后：class="is-round"

先说说 [class.is-round]

类绑定，语法和属性绑定类型 [] 开头 [] 里面的是以 class. 然后 css类名字 形如：[class.class-name] 用 class属性来添加和删除类

再说说 ng-content：

内容投影 其实就是父组件把内部的内容 copy 到子组件

3、事件

按钮默认对外要导出 click 事件：

在模板里面：

<button(click)="clickHandle($event)"[class.is-round]="round"> <ng-content></ng-content> </button>

拿出官网的图：

语法：

1、等号左侧带圆括号的目标事件

2、右侧引号中的模板语句组成

然后下面我们用到了 EventEmitter

@Outputclick: EventEmitter<any> = newEventEmitter<any>;

EventEmitter来自 @angular/core 包

import{ EventEmitter } from'@angular/core';

然后它可以调用 emit

注意这里的参数类型 Event

clickHandle ($event: Event): void{ this.click.emit($event); }

这里的参数 $event 如下：