使用`ViewChild`-方法未调用子方法

Question

我正在尝试从父级调用我的子级组件方法，但是根本不起作用。

这是我的代码：

<router-outlet>
   <app-modal-popup></app-modal-popup> //children for all pages!!
</router-outlet>

在主页中：

    import { Component, OnInit, Output, ViewChild, AfterViewInit  } from '@angular/core';
    import { ModalPopupComponent } from '../../shared/modal/modal-popup/modal-popup.component';

    export class HomeComponent implements OnInit, AfterViewInit {

        @ViewChild('appModal') private appModal : ModalPopupComponent;

    footerLinkHandler(link){
        console.log('link', link );
        this.appModal.popMessage(link);
        return false;
    }

}

但是由于Cannot read property 'popMessage' of undefined出现错误-问题是什么。 但我得到popMessage从appModal为自动填充。

Answer 1

尝试这个

@Component({
 ...
directives: [ModalPopupComponent]
})

class HomeComponent implements OnInit, AfterViewInit{
 @ViewChild(ModalPopupComponent) childComp:ModalPopupComponent;
 ...
 footerLinkHandler(link){
    console.log('link', link );
    this.childComp.popMessage(link);
    return false;
 }