javascript - Angular2 apelare funcție dintr-un alt component

Am două componente: NgbdAlertCloseable și AlertCtrl. De asemenea, am AppComponent ca componentă părinte. Ceea ce vreau este să dau click pe un buton în componenta AlertCtrl și să creez alerta în componenta NgdbAlertCloseable.

Funcția addSuccess() adaugă o alertă în vizualizare și a funcționat bine atunci când o apelam în interiorul componentului său. Totuși, am încercat să folosesc un EventEmitter pentru a apela această funcție dintr-un alt component (așa cum se sugerează aici: https://stackoverflow.com/a/37587862/5291422), dar apare această eroare:

ORIGINAL EXCEPTION: TypeError: self._NgbdAlertCloseable_2_4.addSuccess is not a function

Iată fișierele mele:

ngbd-alert-closeable.component.ts

import { Input, Component } from '@angular/core';

@Component({
  selector: 'ngbd-alert-closeable',
  templateUrl: './app/alert-closeable.html'
})
export class NgbdAlertCloseable {

  @Input()
  public alerts: Array<IAlert> = [];

  private backup: Array<IAlert>;

  private index: number; 

  constructor() {
    this.index = 1;
  }

  public closeAlert(alert: IAlert) {
    const index: number = this.alerts.indexOf(alert);
    this.alerts.splice(index, 1);
  }

  public static addSuccess(alert: IAlert) {
    this.alerts.push({
      id: this.index,
      type: 'success',
      message: 'This is an success alert',
    });
    this.index += 1;
  }

  public addInfo(alert: IAlert) {
    this.alerts.push({
      id: this.index,
      type: 'info',
      message: 'This is an info alert',
    });
    this.index += 1;
  }

}

interface IAlert {
  id: number;
  type: string;
  message: string;
}

alert-ctrl.component.ts

import { EventEmitter, Output, Component } from '@angular/core';
import { NgbdAlertCloseable } from './ngbd-alert-closeable.component';

@Component({
  selector: 'alert-ctrl',
  template: '<button class="btn btn-success" (click)="addSuccessMsg()">Add</button>'
})

export class AlertCtrl {
    @Output() msgEvent = new EventEmitter(); 
    public addSuccessMsg(){
        this.msgEvent.emit(null);
    }
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<div class="col-sm-4"><alert-ctrl (msgEvent)="ngbdalertcloseable.addSuccess()"></alert-ctrl><ngbd-alert-closeable #ngbdalertcloseable></ngbd-alert-closeable>'
})

export class AppComponent { }

O folosesc greșit? Cum pot să repar asta?

Răspuns #1

Verifică dacă funcția addSuccess este statică și folosește proprietăți non-statice.

Ar trebui să fie:

 public addSuccess(alert: IAlert) {
    this.alerts.push({
      id: this.index,
      type: 'success',
      message: 'This is an success alert',
    });
    this.index += 1;
 }

Și în opinia ta, trebuie să transmiți valoarea IAlert; în acest exemplu vom trimite acea valoare când apelăm msgEvent.emit(IAlert).

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<div class="col-sm-4"><alert-ctrl (msgEvent)="ngbdalertcloseable.addSuccess($event)"></alert-ctrl><ngbd-alert-closeable #ngbdalertcloseable></ngbd-alert-closeable>'
})

export class AppComponent { }

Atunci trebuie să trimiți acel IAlert, îți voi schimba AlertCtrl doar în scop demonstrativ.

import { EventEmitter, Output, Component } from '@angular/core';
import { NgbdAlertCloseable } from './ngbd-alert-closeable.component';

@Component({
  selector: 'alert-ctrl',
  template: '<button class="btn btn-success" (click)="addSuccessMsg()">Add</button>'
})

export class AlertCtrl {

    currentAlert:IAlert = {id: 0, type: 'success', message: 'This is an success alert'};

    @Output() msgEvent = new EventEmitter<IAlert>(); 
    public addSuccessMsg(){
        this.msgEvent.emit(this.currentAlert);
    }
}

Mult noroc și codare fericită!