Эмиттер событий дочернего компонента не запущен в родительском - PullRequest
Новая
       17

Эмиттер событий дочернего компонента не запущен в родительском

0 голосов
/ 16 июня 2020

У меня проблема с тем, что эмиттер вывода не работает в родительском компоненте. Он работает внутри дочернего компонента, но не запускается в родительском. Должна быть правильная конфигурация. Почему он не срабатывает внутри родительского компонента? У меня проблема с тем, что эмиттер вывода не работает в родительском компоненте. Он работает внутри дочернего компонента, но не запускается в родительском. Должна быть правильная конфигурация. Почему он не запускается внутри родительского компонента?

Дочерний шаблон: 

   
<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"); 
  }
}

1 Ответ

0 голосов
/ 16 июня 2020

Вы дважды привязываете разные обработчики к одному эмиттеру (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>
...