하위 구성 요소에서 상위 구성 요소로 데이터를 전달하는 방법 각도

하위 구성 요소에서 상위 구성 요소로 데이터를 전달하는 방법 각도

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>

Detail_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 = 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);
}

공식 문서인 구성요소 상호작용에도 잘 설명되어 있습니다.

자식 구성 요소에서 데이터를 보내려면 자식 구성 요소에서 출력()으로 장식된 속성을 만들고 부모에서 생성된 이벤트를 수신합니다.필요할 때마다 페이로드의 새 값으로 이 이벤트를 내보냅니다.

@Output() public eventName:EventEmitter = new EventEmitter();

이 이벤트를 내보냅니다.

this.eventName.emit(payloadDataObject);

대부분의 새 버전 일부 오류가 발생하면 이 라인을 교체합니다.

@출력() 상위 구성요소 = 새 이벤트 이미터();

거의 당신의 실수를 해결할 것입니다.

안녕하세요. 입력과 출력을 활용하실 수 있습니다.입력을 사용하여 변수 형식을 부모에서 자식으로 전달할 수 있습니다.자식에서 부모로 동일하게 출력합니다.

가장 쉬운 방법은 "시작일" 및 "종료일"을 입력으로 전달하는 것입니다.

<calendar [startDateInCalendar]="startDateInSearch" [endDateInCalendar]="endDateInSearch" ></calendar>

이렇게 하면 시작 날짜와 종료 날짜가 검색 페이지에 직접 표시됩니다.효과가 있는지 알려주거나 다른 방법을 생각해 보세요.감사해요.

언급URL : https://stackoverflow.com/questions/42107167/how-to-pass-data-from-child-to-parent-component-angular