angular6自定義按鈕元件 並實現父子元件見的傳值
在控制檯輸入命令建立一個按鈕元件 ng g component bigbutton，cli會自動建立一個BitbuttonComponent元件，提供了html、ts、css檔案。修改html、ts、css檔案：
html內容：
<div class='big-btn' (click)='btnClick()'>
<img style='clear: both; width:30px;height:30px;' 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;
}
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]="'新的標題'" (bitbtnClick)='bitbtnClick($event)'></app-bitbutton>
ts：
bitbtnClick(val){
console.log('===123456789===' + val);
}
用$event接收子元件傳來的資料。
至此，實現了一個簡單的可重用大按鈕元件，實現了自定義按鈕標題、按鈕圖示、點選事件的觸發、父元件接收點選事件、父子元件間的傳值操作。
