Javascript 从另一个组件调用组件函数—；获得；无法读取属性"；错误

我试图从一个组件调用另一个组件函数，方法是将一个组件的引用传递给另一个组件，但出现“无法读取属性”错误。这是密码

警报组件

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

@Component({
  selector: 'app-alert',
  templateUrl: './alert.component.html',
  styleUrls: ['./alert.component.css']      
})

export class AlertComponent implements OnInit {  
  AlertMessage:string;

  constructor() {        
   }

  showSuccessAlert(){       
      this.AlertMessage =  "Data saved successfully.";
  }

  ngOnInit() {
  }

}

警报组件html

<p>{{AlertMessage}}</p>

<app-alert></app-alert>

html

<p>{{AlertMessage}}</p>

<app-alert></app-alert>

错误

ERROR TypeError: Cannot read property 'showSuccessAlert' of undefined
    at QueueEditComponent.push../src/app/queue/queue.edit.component.ts.QueueEditComponent.saveQueue (queue.edit.component.ts:44)
    at Object.eval [as handleEvent] (QueueEditComponent.html:25)
    at handleEvent (core.js:19545)
    at callWithDebugContext (core.js:20639)
    at Object.debugHandleEvent [as handleEvent] (core.js:20342)
    at dispatchEvent (core.js:16994)
    at core.js:17441
    at HTMLButtonElement.<anonymous> (platform-browser.js:993)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:14051)

错误类型错误：无法读取未定义的属性'showsecessalert'
在QueueEditComponent.push../src/app/queue/queue.edit.component.ts.QueueEditComponent.saveQueue（queue.edit.component.ts:44）
在Object.eval[as handleEvent]（QueueEditComponent.html:25）
在handleEvent（core.js:19545）
在callWithDebugContext（core.js:20639）
在Object.debugHandleEvent[作为handleEvent]（core.js:20342）
在dispatchEvent（core.js:16994）
在core.js:17441
在HTMLButtoneElement。（platformbrowser.js:993）
在ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask（zone.js:423）
位于Object.onInvokeTask（core.js:14051）

您应该使用

@ViewChild

而不是

@Input

。大概是这样的：

import { ..., ViewChild } from '@angular/core';
...
import { AlertComponent } from '../alert/alert.component';

@Component({...})
export class QueueEditComponent implements OnInit{
    @ViewChild(AlertComponent) alert:AlertComponent;

    ...

    @HostListener('saveQueue')
    saveQueue(queue){
        this.alert.showSuccessAlert(); 
    }
}

---

PS:在调用

ngAfterViewInit

之前，您将无法访问

QueueEditComponent

中的

AlertComponent

。因此，请确保在

ngAfterViewInit

之后的某个时间调用您的

saveQueue