如何在 Angular 2 中从父级调用 @Input EventEmitter

Question

您好，我有一个带有以下 @input 的子组件：

@Input() inputEvents: EventEmitter<{ type: string, data: string | DateModel }>;

this.inputEvents.subscribe((e: any) => {
        if (e.type === 'action') {
          if (e.data === 'toggle') {
            this.toggle();
          }
          if (e.data === 'close') {
            this.close();
          }
          if (e.data === 'open') {
            this.open();
          }
        }
}

如何触发父级的订阅？我在父组件中尝试了以下操作，但它不起作用：

@Output() datePickerAction: EventEmitter<{ type: string, data: string }>;

this.datePickerAction.next({ type: 'action', data: 'toggle' });

Answer 1

如果您的子组件有：

@Input x(): number;

然后，系统会要求您将值从父组件传递给子组件，如下所示：

<my-component [x]="myVariable"></my-component>

其中“ myVariable”表示类型为“ number”的变量。在您的情况下，您的输入名称为“ inputEvents”，类型为“ EventEmitter<{ type: string, data: string | DateModel }>”。因此，从您的父组件中，您将同样传递输入。

<ng2-datepicker [(ngModel)]="myDate" [inputEvents]='toggleCalEvent'></ng2-datepicker>

其中变量“ toggleCalEvent”的类型为“ EventEmitter<{ type: string, data: string | DateModel }>”，就像您的父组件一样：

private toggleCalEvent: EventEmitter<{ type: string, data: string | DateModel }> = new EventEmitter();

然后你可以像任何 EventEmitter 一样调用这个 EventEmitter：

openCal() {
     this.toggleCalEvent.next({ type: 'action', data: 'toggle' });
}

由于日期选择器订阅了这个“ inputEvents”，那么当您触发“ next”时，它将在子级中触发此事件。但还有一个问题。如果您通过单击某物来触发此事件，则它将不起作用。尝试这个：

<div 
    (click)='openCal()' 
    (mouseenter)='openCal()'
    style='background-color:yellow; width:100px; height:50px;'
></div>
<ng2-datepicker [(ngModel)]="myDate" [inputEvents]='toggleCalEvent'></ng2-datepicker>

您将看到日历在鼠标输入时切换，但不单击。这是因为如果您单击日历之外的任意位置，日期选择器将被编写为关闭。因此，单击 div 后它会立即打开和关闭。为了防止这种情况，您可以添加以下内容以防止点击冒泡：

<div 
    (click)='openCal($event)' 
    (mouseenter)='openCal($event)'
    style='background-color:yellow; width:100px; height:50px;'
></div>
<ng2-datepicker [(ngModel)]="myDate" [inputEvents]='toggleCalEvent'></ng2-datepicker>

openCal(e) {
    this.toggleCalEvent.next({ type: 'action', data: 'toggle' });
    e.preventDefault();
    e.stopImmediatePropagation();
}

现在日历按预期显示切换。