子组件事件发射器在父组件中未被发射。

Question

我遇到了输出发射器在父组件中不工作的问题。它在子组件中工作，但在父组件中没有触发。它应该是正确的配置。为什么它在父组件中不发射？ 我有一个问题，输出发射器在父组件中不工作。它在子组件中工作，但在父组件中没有触发。应该是正确的配置。为什么它在父组件中不被触发？

子模板。  

   
<div>
     <ngx-table         
        #table        
        [id]="id"
        [configuration]="configuration"
        [data]="data"
        [columns]="columns"
        [noResultsTemplate]="noResultsTemplate">
      </ngx-table>
        <button (click)="onUpdateClick()"> Update </button>
        <button (click)="onDeleteClick()"> Delete </button>
</div>

   

子控制器

import { Component, OnInit, Input, ViewChild, Output, EventEmitter, TemplateRef } from '@angular/core';
    import { DefaultConfig, Config, Columns, APIDefinition, API } from 'ngx-easy-table';
    import { CallType } from '../../models/call';

@Component({
  selector: 'app-datatable',
  templateUrl: './datatable.component.html',
  styleUrls: ['./datatable.component.scss']
})
export class DatatableComponent implements OnInit {
  @ViewChild('table', { static: true }) table: APIDefinition;
  @ViewChild('actionTable', { static: true }) actionTable: TemplateRef<any>;

  @Output() updateButtonClick = new EventEmitter<>();
  @Output() deleteButtonClick = new EventEmitter<>();
  @Input() columns: Columns[];
  @Input() data: any;
  @Input() id: any;
  public configuration: Config;

  constructor() {}

  ngOnInit(): void {
    this.configuration = { ...DefaultConfig };
    this.configuration.searchEnabled = false;
    this.configuration.rows = 3;
    this.columns = [...this.columns, {key: 'action', title: 'Action', cellTemplate: this.actionTable, width: '15%'}];

  }


  onChange(name: string): void {
    this.table.apiEvent({
      type: API.onGlobalSearch, value: name,
    });
  }

  onUpdateClick() {
    console.log();
    this.updateButtonClick.emit();
  }

  onDeleteClick() {
    this.deleteButtonClick.emit();
  }

}

父母模板

<app-datatable
  [id]="'idMytable'"
  [data]="data" [columns]="columns">
  (updateButtonClick)="openEditCallTypeModal()"
  (deleteButtonClick)="openDeleteCallTypeModal()">
</app-datatable>

母控制器

import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { APIDefinition, Config, Columns, DefaultConfig, API } from 'ngx-easy-table';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
import { SettingService } from '../../setting.service';
import { CallType } from 'src/app/shared/models/call';
import { CallTypeModalComponent } from './edit-call-type/call-type-modal.component';

@Component({
  selector: 'app-call-type-table',
  templateUrl: './call-type-table.component.html',
  styleUrls: ['./call-type-table.component.scss']
})
export class CallTypeTableComponent implements OnInit {
  @Input() callTypes: CallerType[];

  columns = [
    { key: 'id', title: 'Id', width: '10%'},
    { key: 'nameEN', title: 'English', width: '25%'  }
  ];

  bsModalRef: BsModalRef;

  constructor(private modalService: BsModalService, private settingService: SettingService) {}

  ngOnInit(): void {
  }


  openDeleteCallTypeModal() {//not firing code
    console.log('clicked');
  }

  openEditCallTypeModal(){
       // here is not calling
    console.log("work"); 
  }
}

Answer 1

你把不同的处理程序绑定到同一个发射器上 (updateButtonClick)在父模板中出现两次。

<!-- wrong -->
<app-datatable
  [id]="'idMytable'"
  [data]="data" [columns]="columns"> /// here is something wrong
  (updateButtonClick)="openEditCallTypeModal()"
  (updateButtonClick)="openDeleteCallTypeModal()">
</app-datatable>

应该是

<app-datatable
  [id]="'idMytable'"
  [data]="data" [columns]="columns"
  (updateButtonClick)="openEditCallTypeModal()"
  (deleteButtonClick)="openDeleteCallTypeModal()">
</app-datatable>