search_detailというコンポーネントがあり、その中にcalendarという別のコンポーネントがあります。
**SearchDetail_component.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>
SearchDetail_component.ts
import 'rxjs/add/observable/fromEvent';
@Component({
selector: 'searchDetail',
templateUrl: './search_detail.component.html',
moduleId: module.id
})
Calendar.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();
}
}
検索詳細ページでokボタンをクリックすると、開始日と終了日にアクセスしたいのですが、どうすればよいですか?
子コンポーネントに EventEmitter
を @Output
として登録します。
@Output() onDatePicked: EventEmitter<any> = new EventEmitter<any>();
クリック時に値を出力します。
public pickDate(date: any): void {
this.onDatePicked.emit(date);
}
親コンポーネント'のテンプレートでイベントをリッスンする。
<div>
<calendar (onDatePicked)="doSomething($event)"></calendar>
</div>
と親コンポーネント内の
public doSomething(date: any):void {
console.log('Picked date: ', date);
}
また、公式のドキュメントでもよく説明されています。コンポーネントの相互作用。
こんにちは、あなたは入力と出力を利用することができます。 入力は、親から子へ変数を渡すことができます。出力は同じですが、子から親に渡すものです。
一番簡単な方法は、入力として "startdate" と "endDate" を渡すことです。
<calendar [startDateInCalendar]="startDateInSearch" [endDateInCalendar]="endDateInSearch" ></calendar>
この方法では、検索ページで直接開始日と終了日を指定できます。 うまくいくかどうか、また他の方法を考えているかどうか教えてください。 ありがとうございます。