Функция вызова Angular2 из другого компонента

У меня есть два компонента: NgbdAlertCloseable и AlertCtrl. Также у меня есть AppComponent в качестве родительского компонента. Я хочу нажать кнопку в компоненте AlertCtrl и создать предупреждение в компоненте NgdbAlertCloseable.

Функция addSuccess() добавляет оповещение в представление, и она хорошо работала, пока я вызывал ее внутри ее компонента. Однако я попытался использовать EventEmitter для вызова этой функции из другого компонента (как предлагается здесь: https://stackoverflow.com/a/37587862/5291422), но выдает следующую ошибку:

ORIGINAL EXCEPTION: TypeError: self._NgbdAlertCloseable
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;
}

4.addSuccess is not a function

Вот мои файлы:

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 { }

Я использую это неправильно? Как я могу это исправить?


typescript javascript angular eventemitter
person Bünyamin Sarıgül    schedule 01.09.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Убедитесь, что функция addSuccess является статической и использует нестатические свойства.

Должно быть:

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

И, по вашему мнению, вы должны передать значение IAlert, в этом примере мы отправим это значение при вызове 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 { }

Затем вы должны отправить этот IAlert, я изменю ваш AlertCtrl только для демонстрационных целей.

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

Удачи и счастливого кодирования!

person dlcardozo    schedule 14.10.2016