在控制台输入命令创建一个按钮组件 ng g component bigbutton，cli会自动创建一个BitbuttonComponent组件，提供了html、ts、css文件。修改html、ts、css文件：
html内容：
<div class='big-btn' (click)='btnClick()'>
<img src='{{img}}' />
<br />
<label>{{title}}</label>
</div>
css内容
.big-btn{
min-width:50px;border: dodgerblue solid 1px; float: left;text-align: center;
}
.big-btn:hover{
min-width:50px;border: red solid 1px; float: left;text-align: center;font-weight: bold;
}
.big-btn:active{
min-width:50px;border: red solid 1px; float: left;text-align: center;font-weight: bold; color:red;
}
.big-btn img{
clear: both; width:30px;height:30px;
}
.big-btn:active img{
clear: both; width:25px;height:25px;
}
ts内容
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
@Component({
selector: 'app-bitbutton',
templateUrl: './bitbutton.component.html',
styleUrls: ['./bitbutton.component.css']
})
export class BitbuttonComponent implements OnInit {
constructor() { }
ngOnInit() {
}
@Input() img: string = '../../assets/logo.svg';// @Input()标记的组件数据成员，父组件可以在使用子组件的html标签中通过img属性来进行赋值
@Input() title: string = 'hello';// @Input()标记的组件数据成员，父组件可以在使用子组件的html标签中通过title属性来进行赋值
btnClick() {
console.log('button' + this.title + ' clicked');
this.bitbtnClick.emit('kkk');//触发事件，并向父组件传值。
}
@Output() bitbtnClick: EventEmitter<any> = new EventEmitter();//@Output()标记的EventEmitter对象，向父组件暴露一个事件bitbgnClick，父组件可以接收子组件触发的事件。
}
父组件中使用子组件：
html：
<app-bitbutton [title]="'新的标题'" [img]="'../../assets/logo.svg'" (bitbtnClick)='bitbtnClick($event)'></app-bitbutton>
<app-bitbutton [title]="'新的标题2'" [img]="'../../assets/logo2.svg'" (bitbtnClick)='bitbtnClick2($event)'></app-bitbutton>
ts：
bitbtnClick(val){
console.log('===123456789===' + val);
}
bitbtnClick2(val){
console.log('===123456789===' + val);
}
用$event接收子组件传来的数据。
至此，实现了一个简单的可重用大按钮组件，实现了自定义按钮标题、按钮图标、点击事件的触发、父组件接收点击事件、父子组件间的传值操作。
