Saya memiliki komponen bernama search_detail yang memiliki komponen lain di dalamnya bernama calendar,
Komponen_Detail_pencarian.html
<li class="date">
<div class="btn-group dropdown" [class.open]="DatedropdownOpened">
<button type="button" (click)="DatedropdownOpened = !DatedropdownOpened" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" [attr.aria-expanded]="dropdownOpened ? 'true': 'false'">
Date <span class="caret"></span>
</button>
<ul class="dropdown-menu default-dropdown">
<calendar ></calendar>
<button > Cancel </button>
<button (click)="setDate(category)"> Ok </button>
</ul>
</div>
</li>
Komponen_Rincian_Pencarian.ts
import 'rxjs/add/observable/fromEvent';
@Component({
selector: 'searchDetail',
templateUrl: './search_detail.component.html',
moduleId: module.id
})
Kalender.component.ts
import { Component, Input} from '@angular/core';
@Component({
moduleId:module.id,
selector: 'calendar',
templateUrl: './calendar.component.html'
})
export class CalendarComponent{
public fromDate:Date = new Date();
private toDate:Date = new Date();
private events:Array<any>;
private tomorrow:Date;
private afterTomorrow:Date;
private formats:Array<string> = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY', 'shortDate'];
private format = this.formats[0];
private dateOptions:any = {
formatYear: 'YY',
startingDay: 1
};
private opened:boolean = false;
public getDate():number {
return this.fromDate.getDate() || new Date().getTime();
}
}
Saya ingin mengakses tanggal mulai dan tanggal akhir saat klik tombol ok di halaman detail pencarian. bagaimana caranya?
Daftarkan EventEmitter
di komponen anak Anda sebagai @Output
:
@Output() onDatePicked: EventEmitter<any> = new EventEmitter<any>();
Memancarkan nilai saat klik:
public pickDate(date: any): void {
this.onDatePicked.emit(date);
}
Dengarkan peristiwa di templat komponen induk Anda:
<div>
<calendar (onDatePicked)="doSomething($event)"></calendar>
</div>
dan di komponen induk:
public doSomething(date: any):void {
console.log('Picked date: ', date);
}
Hal ini juga dijelaskan dengan baik di dokumen resmi: Interaksi komponen.
Halo, Anda dapat menggunakan input dan output. Input memungkinkan Anda untuk melewatkan variabel dari induk ke anak. Output sama tetapi dari anak ke orang tua.
Cara termudah adalah dengan melewatkan "startdate" dan "endDate" sebagai input
<calendar [startDateInCalendar]="startDateInSearch" [endDateInCalendar]="endDateInSearch" ></calendar>
Dengan cara ini Anda memiliki tanggal mulai dan tanggal akhir langsung di halaman pencarian. Beritahu saya jika ini berhasil, atau pikirkan cara lain. Terima kasih