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 = new EventEmitter();//@Output()标记的EventEmitter对象,向父组件暴露一个事件bitbgnClick,父组件可以接收子组件触发的事件。

}

父组件中使用子组件:

html:

title]="'新的标题'" [img]="'../../assets/logo.svg'" (bitbtnClick)='bitbtnClick($event)'>

title]="'新的标题2'" [img]="'../../assets/logo2.svg'" (bitbtnClick)='bitbtnClick2($event)'>

ts:

bitbtnClick(val){

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

}

bitbtnClick2(val){

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

}

用$event接收子组件传来的数据。

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

angular6自定义按钮组件 并实现父子组件间的传值_第1张图片

按钮风格比较丑,可以采用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;

}

调用:

效果:

angular6自定义按钮组件 并实现父子组件间的传值_第2张图片

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

1、在子控件中定义方法

greeting(value: string): string{

return "hello:" + value;

}

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

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

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

@ViewChild('bigBtn1')

bigBtn1: BitbuttonComponent;

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

bitbtnClick(val){

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

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

}

 

 

你可能感兴趣的:(angular)