別のコンポーネントからのAngular2呼び出し関数

Question

NgbdAlertCloseableとAlertCtrlの2つのコンポーネントがあります。また、私は親コンポーネントとしてAppComponentを持っています。私が欲しいのは、AlertCtrlコンポーネントのボタンをクリックし、NgdbAlertCloseableコンポーネントで警告を作成することです。

addSuccess（）関数は、ビューにアラートを追加し、そのコンポーネント内で呼び出すとうまくいきました。 （：https://stackoverflow.com/a/37587862/5291422ここで提案される）が、それは、このエラーを与える：しかし、私は別のコンポーネントからこの関数を呼び出すために持つEventEmitterを使用しようとした

ngbd-アラート閉鎖可能：ここ

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

が私のファイルです.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; 
} 

アラート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 { } 

は私が間違ってそれを使用していますか？どうすれば修正できますか？

Answer 1

addSuccess関数が静的であり、静的でないプロパティを使用していることを確認します。

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

そして、あなたのビューで、あなたは私たちがmsgEvent.emit（IAlert）を呼び出すときに我々はその値をお送りします。この例では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); 
    } 
} 

幸運と幸せなコーディング！