typescript 如何将数据从子元件传递到父元件Angular

pdkcd3nj  于 2022-11-30  发布在  TypeScript
关注(0)|答案(4)|浏览(127)

我有一个名为search_detail的组件,

搜索详细信息_组件.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>

搜寻元件详细数据.ts

import 'rxjs/add/observable/fromEvent';
@Component({
    selector: 'searchDetail',
    templateUrl: './search_detail.component.html',
    moduleId: module.id

})

日历.组件.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();
      }
    }

我想在搜索详细信息页面中单击“确定”按钮后访问开始日期和结束日期。该如何操作?

6l7fqoea

6l7fqoea1#

将子组件中得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);
}

官方文档中也有详细解释:Component interaction

5vf7fwbs

5vf7fwbs2#

若要从子组件发送数据,请在子组件中创建用output()修饰的属性,并在父组件中侦听创建的事件。需要时使用负载中的新值发出此事件。

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

要发出此事件:

this.eventName.emit(payloadDataObject);
ulydmbyx

ulydmbyx3#

大多数新版本如果出现错误,请替换此行
在这个过程中,您可以使用一个新的事件发生器()。
几乎它会解决你的错误

bjp0bcyl

bjp0bcyl4#

你好,你可以使用输入和输出。输入让你传递变量从父到子。输出相同,但从子到父。
最简单的方法是传递"startdate"和"endDate"作为输入

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

这样你就可以直接在搜索页面中找到你的开始日期和结束日期。如果可以的话,请告诉我,或者换一种方法。谢谢

相关问题