하위 컴포넌트에서 상위 컴포넌트 Angular2로 데이터 전달
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();
}
}
검색 세부정보 페이지에서 확인 버튼을 클릭하면 시작일과 종료일에 액세스하고 싶습니다. 어떻게 해야 하나요?
39
2
자식 컴포넌트에
EventEmitter
를@Output
으로 등록합니다:클릭 시 값을 전송합니다:
부모 컴포넌트의 템플릿에서 이벤트를 수신합니다:
와 부모 컴포넌트에서 이벤트를 수신합니다:
공식 문서에도 잘 설명되어 있습니다: 컴포넌트 상호작용.
안녕하세요 입력과 출력을 사용할 수 있습니다. 입력을 사용하면 부모에서 자식으로 변수를 전달할 수 있습니다. 출력은 동일하지만 자식에서 부모로 전달합니다.
가장 쉬운 방법은 입력으로 &'startdate&'와 &'endDate&'를 전달하는 것입니다.
이렇게 하면 검색 페이지에서 바로 시작일과 종료일을 확인할 수 있습니다. 작동하는지 알려주시거나 다른 방법을 생각해 보세요. 고마워요