다른 구성 요소의 각도 2 호출 함수

Question

두 개의 구성 요소 NgbdAlertCloseable 및 AlertCtrl이 있습니다. 또한 부모 구성 요소로 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); 
    } 
} 

행운과 행복한 코딩!