Angular 2 离子 2，调用未定义的子组件

Question

我的 ionic 应用程序中有一个全局页脚，我这样做的方式是这样的。我在离子导航中添加了选择器组件，它运行良好。我的页脚显示在每一页中。

在应用程序中.html

<ion-nav [root]="rootPage" #content swipeBackEnabled="false">
</ion-nav>
<call-footer #CallChild></call-footer>

但是，在一个页面中，我想控制页脚，我可以隐藏它或更改其中的变量。在我的页脚组件中，我有一个名为"test"的函数，在其中一个页面("调用"(中，我正在尝试这个。

呼叫.ts

import { Component, OnInit, ViewChild} from '@angular/core';
import { oncallpage } from '../calls/oncall/oncall';
import { callfooter } from '../../components/callfooter/callfooter.component';
@Component({
    selector: 'page-calls',
    templateUrl: 'calls.html'
})
export class callspage implements OnInit {
    @ViewChild('CallChild') child;

    constructor() { }

      ngAfterViewInit() {
         this.child.test(); //error
  }

但是我收到"无法读取未定义的属性'测试'">

我

不确定是否存在语法错误或我缺少一些想法。我该如何解决此案？

Answer 1

@ViewChild返回一个ElementRef。你不能调用这样的函数。

解决方法是使用ionic的Events(文档(

将函数更改为：

ngAfterViewInit() {
   this.events.publish("child:test");
}

在您的孩子页面中：

constructor(events: Events) {
  events.subscribe("child:test", ()=> {
     this.test();
  });
}
test() { console.log("test called"); }

另外有关更详细的解释，请参阅我的回答 此处 如何更新 ionic 2 侧菜单中的值