angular：自定义按钮组件 并实现父子组件间的传值

在控制台输入命令创建一个按钮组件 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接收子组件传来的数据。

至此，实现了一个简单的可重用大按钮组件，实现了自定义按钮标题、按钮图标、点击事件的触发、父组件接收点击事件、父子组件间的传值操作。

按钮风格比较丑，可以采用ng-zorro提供的默认css风格，图标采用awefont，稍作调整：

大按钮控件的html模板：

<div class='ant-btn-danger big-btn' (click)='btnClick()'>

<i class="anticon {{img}}"></i>

<br />

<label>{{title}}</label>

</div>

大按钮控件的css：

.big-btn{

min-width:50px; float: left;text-align: center; margin-left:5px;border-radius:5px;padding: 5px;

}

.big-btn:hover{

min-width:50px; float: left;text-align: center;

}

.big-btn:active{

min-width:50px; float: left;text-align: center;

}

 

.big-btn img{

clear: both; width:30px;height:30px;

}

 

.big-btn i{

font-size: 30px;

}

 

.big-btn:active img{

clear: both; width:25px;height:25px;

}

调用：

<app-bitbutton [title]="'新的标题'" [img]="'anticon-pie-chart'" (bitbtnClick)='bitbtnClick($event)'></app-bitbutton>

<app-bitbutton [title]="'新的标题2'" [img]="'anticon-folder-add'" (bitbtnClick)='bitbtnClick2($event)'></app-bitbutton>

效果：

父控件调用子控件中的方法：

1、在子控件中定义方法

greeting(value: string): string{

return "hello:" + value;

}

2、在使用子控件的html标签中给子空间设置名称

<app-bitbutton #bigBtn1 [title]="'新的标题'" [img]="'anticon-pie-chart'" (bitbtnClick)='bitbtnClick($event)'></app-bitbutton>

3、在父控件的ts文件中使用@ViewChild获取到子控件的实例引用

@ViewChild('bigBtn1')

bigBtn1: BitbuttonComponent;

4、直接调用子控件中的方法

bitbtnClick(val){

console.log('===123456789===' + val);

console.log(this.bigBtn1.greeting("henreash"));

}