角2离子2，调用子组件undefined

我在我的离子应用程序中有一个全球页脚，我这样做的方式就是这样。我在ion-nav中添加了选择器组件，它运行良好。我的页脚显示在每一页中。角2离子2，调用子组件undefined

在app.html

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"> 

</ion-nav> 
<call-footer #CallChild></call-footer>

然而，在一个网页，我想有页脚的控制，我可以隐藏或更改里面的变量。在我的页脚组件中，我有一个名为'test'的函数，并且在其中一个页面（'调用'）中我正在尝试这个。

calls.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 
    }

但是我得到“无法读取属性‘测试’的未定义”

我不知道是否有语法错误或我我错过了一些想法。我该如何解决这个案子？

来源

2017-05-09 Missak Boyajian

你的c alls.html的样子？ – echonax

我编辑过。这是一个calls.html –

我没有看到calls.html。有一个app.html – echonax

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

一种解决方法是使用离子的Events(docs)

的功能更改为：

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

而在你的子页：

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

test() { console.log("test called"); }

也为更详细的解释，请参考我的答案在这里How to update value inside ionic 2 side menu

来源

2017-05-09 08:13:21 Ivaro18

只是试了一下，它的工作！谢谢！ –

嗨，跟进问题。我想这样的事情 // callspage this.events.publish（“child：initializefooter”，this）; //页脚 events.subscribe（ “孩子：initializefooter”（页）=> { this.ModalExitCall =页; this.ModalExitCall.present（）; //打开模型得到错误： //没有为[object Object]找到组件工厂 }）有没有办法将输入参数转换为组件？ –

在我的手机上，但看看Angular的'output'参数。你可以用它们来调用一个函数 – Ivaro18

角2离子2，调用子组件undefined

回答

相关问题