Angular2从另一个组件调用函数

Angular2 call function from another component

本文关键字：调用 函数 组件 另一个 Angular2      更新时间：2023-09-26

我有两个组件:NgbdAlertCloseable和AlertCtrl。我还有AppComponent作为父组件。我想要的是点击AlertCtrl组件中的一个按钮，并在NgdbAlertCloseable组件上创建警报。

addSuccess()函数向视图添加了一个警报，当我在它的组件内部调用它时，它工作得很好。然而，我试图使用EventEmitter从另一个组件调用此函数(如这里建议:https://stackoverflow.com/a/37587862/5291422)，但它给出了这个错误:

ORIGINAL EXCEPTION: TypeError: self._NgbdAlertCloseable_2_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 { }

我用错了吗?我怎样才能解决这个问题呢?

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

祝你好运，快乐编码!

相关文章：