angular6自定义按钮组件 并实现父子组件间的传值
在控制台输入命令创建一个按钮组件 ng g component bigbutton，cli会自动创建一个BitbuttonComponent组件，提供了html、ts、css文件。修改html、ts、css文件：
html内容：
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
}
父组件中使用子组件：
html：
ts：
bitbtnClick(val){
console.log('===123456789===' + val);
}
bitbtnClick2(val){
console.log('===123456789===' + val);
}
用$event接收子组件传来的数据。
至此，实现了一个简单的可重用大按钮组件，实现了自定义按钮标题、按钮图标、点击事件的触发、父组件接收点击事件、父子组件间的传值操作。
按钮风格比较丑，可以采用ng-zorro提供的默认css风格，图标采用awefont，稍作调整：
大按钮控件的html模板：
大按钮控件的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;
}
调用：
效果：
父控件调用子控件中的方法：
1、在子控件中定义方法
greeting(value: string): string{
return "hello:" + value;
}
2、在使用子控件的html标签中给子空间设置名称
3、在父控件的ts文件中使用@ViewChild获取到子控件的实例引用
@ViewChild('bigBtn1')
bigBtn1: BitbuttonComponent;
4、直接调用子控件中的方法
bitbtnClick(val){
console.log('===123456789===' + val);
console.log(this.bigBtn1.greeting("henreash"));
}