Question

我有一个名为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();
      }
    }

我想点击搜索详细信息页面中的确定按钮来访问startdate和enddate。我该怎么办？

Answer 1

在您的子组件中注册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);
}

官方文档中也对此进行了详细解释：Component interaction。

Answer 2

为了从子组件发送数据，在子组件中创建以output（）装饰的属性，在父组件中侦听创建的事件。在需要时使用有效负载中的新值发出此事件。

if (xGrad * yGrad <= (float) 0 /*(1)*/
                    ? Math.abs(xGrad) >= Math.abs(yGrad) /*(2)*/
                        ? (tmp = Math.abs(xGrad * gradMag)) >= Math.abs(yGrad * neMag - (xGrad + yGrad) * eMag) /*(3)*/
                            && tmp > Math.abs(yGrad * swMag - (xGrad + yGrad) * wMag) /*(4)*/
                        : (tmp = Math.abs(yGrad * gradMag)) >= Math.abs(xGrad * neMag - (yGrad + xGrad) * nMag) /*(3)*/
                            && tmp > Math.abs(xGrad * swMag - (yGrad + xGrad) * sMag) /*(4)*/
                    : Math.abs(xGrad) >= Math.abs(yGrad) /*(2)*/
                        ? (tmp = Math.abs(xGrad * gradMag)) >= Math.abs(yGrad * seMag + (xGrad - yGrad) * eMag) /*(3)*/
                            && tmp > Math.abs(yGrad * nwMag + (xGrad - yGrad) * wMag) /*(4)*/
                        : (tmp = Math.abs(yGrad * gradMag)) >= Math.abs(xGrad * seMag + (yGrad - xGrad) * sMag) /*(3)*/
                            && tmp > Math.abs(xGrad * nwMag + (yGrad - xGrad) * nMag) /*(4)*/
                    ) {
                    magnitude[index] = gradMag >= MAGNITUDE_LIMIT ? MAGNITUDE_MAX : (int) (MAGNITUDE_SCALE * gradMag);
                } else {
                    magnitude[index] = 0;
                }

发出此事件：

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

Answer 3

大多数新版本如果出现错误请替换此行

@Output() parentComponent = new EventEmitter();

几乎可以解决你的错误

Answer 4

您好，您可以使用输入和输出。输入允许您将变量形式父级传递给子级。输出相同但从孩子到父母。

最简单的方法是通过＆＃34; startdate＆＃34;和＆＃34; endDate＆＃34;作为输入

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

通过这种方式，您可以在搜索页面中直接使用startdate和enddate。让我知道它是否有效，或者以另一种方式思考。感谢

将数据从子组件传递到父组件Angular2

4 个答案: