目標:實現如圖功能(可擴展成年選擇器,年-月選擇器,年月日選擇器)
第一步:先創建shared文件夾,該文件夾可以放一些常用的組件:
第二步:編寫控件(date):
有兩個需要注意的地方:
- @ViewChild,使用這個的時候,angular 8 Expected 2 arguments,需要有兩個參數;
- @Input() type,這個是用來接收時間類型(‘yearPicker’,‘monthPicker’,‘dayPicker’);
第三步:在需要的地方引用該控件:
<app-date style="width:166px;height: 30px;display: flex;flex-direction: row;"
[type]="timeType"
(emitDate)="changeDate($event)">
</app-date>
拿到控件裏值:
changeDate(ev){ //receive data from date component
console.log(ev);
}
完整代碼:date組件完整代碼 ;
不知道如何管理公共組件的,可以查看這裏:Angular管理共享組件