事件发射器：模板不响应发出的事件

Question

我有一个 child 组件发出这样的事件

@Output() setAdditionalCodeValue: EventEmitter<any> = new EventEmitter();

而 HTML 是

  <mat-row *matRowDef="let row; columns: displayedColumns;" class="my-mat-cell" (click)="setAdditionalCodeValue.emit(row)">
      </mat-row>

我的 parent HTML 然后绑定到 setAdditionalCodeValue

<ng-container matColumnDef="additionalCode">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>Additional Code</th>
  <td mat-cell *matCellDef="let element" class="grandParent" >
    <mat-form-field class="type" let="i = index">
      <input matInput (keyup)="toggleLookup($event, element)" (setAdditionalCodeValue)="updateAdditionalCodeHandler(element)" [(ngModel)]="countryLookupInput" autocomplete="off" (keydown.ArrowDown)="onDown()">
    </mat-form-field>
    <div *ngIf="element.expanded" class="parent">
      <app-lookup-popup class="child" (closeLookup)="closeLookupHandler(element)" ></app-lookup-popup>
    </div>
  </td>
</ng-container>

并且 parent 组件看起来像

  updateAdditionalCodeHandler(evt) {
console.log('Update Addition Code event received: ' + evt);
this.countryLookupInput = evt;

}

没有命中 updateAdditionalCodeHandler，因为开始时没有向控制台写入任何内容。

我的最终目标是更新 'countryLookupInput' 属性具有从 child 的 'row' 参数发出的值。

奇怪的是 '(closeLookup)="closeLookupHandler(element)"' 以同样的方式连接起来，看看吧！

Answer 1

问题出在以下元素中：

 <app-lookup-popup class="child" (closeLookup)="closeLookupHandler(element)" ></app-lookup-popup>

修改代码

<app-lookup-popup class="child" (closeLookup)="closeLookupHandler(element)" (setAdditionalCodeValue)="updateAdditionalCodeHandler(element)" ></app-lookup-popup>

和其他组件

<input matInput (keyup)="toggleLookup($event, element)"[(ngModel)]="countryLookupInput" autocomplete="off" (keydown.ArrowDown)="onDown()">

如果这是发出事件的组件

Answer 2

我认为你的代码中有两个问题，首先你在 input 而不是你的子组件

上处理了事件

我是说这里 ->

  <input matInput (keyup)="toggleLookup($event, element)" (setAdditionalCodeValue)="updateAdditionalCodeHandler(element)"

而不是这里 ->

  <app-lookup-popup class="child" (closeLookup)="closeLookupHandler(element)" ></app-lookup-popup>

第二个问题是您需要使用 $event 来访问发出的值

所以下面修改后的代码应该可以工作

<ng-container matColumnDef="additionalCode">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>Additional Code</th>
  <td mat-cell *matCellDef="let element" class="grandParent" >
    <mat-form-field class="type" let="i = index">
      <input matInput (keyup)="toggleLookup($event, element)"  [(ngModel)]="countryLookupInput" autocomplete="off" (keydown.ArrowDown)="onDown()">
    </mat-form-field>
    <div *ngIf="element.expanded" class="parent">
      <app-lookup-popup class="child" (closeLookup)="closeLookupHandler(element)" 
 (setAdditionalCodeValue)="updateAdditionalCodeHandler($event)" ></app-lookup-popup>
    </div>
  </td>
</ng-container>

事件发射器：模板不响应发出的事件

Event Emitter: Template not reacting to emitted event

angular-material

angular

angular-event-emitter