离子2 - 如何从父

访问组件的功能我在SearchingModalComponent离子2 - 如何从父

定制的负载（SearchingModalComponent）我要调用函数秀（）

SearchingModalComponent

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'searching-modal', 
    templateUrl: 'searching-modal.html' 
}) 
export class SearchingModalComponent { 
    public show_classname: any; 

    constructor() { 
     this.show_classname = "" 
    } 

    public show() { 
     this.show_classname = "busy"; 
    } 

    hide() { 
     this.show_classname = ""; 
    } 
}

app.modules。 TS

import { SearchingModalComponent } from '../components/searching-modal/searching-modal'; 

@NgModule({ 
    declarations: [ 
     MyApp, 
     HomePage, 
     ScanPage, 
     SearchingModalComponent 
    ], 
    imports: [ 
     IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
     MyApp, 
     HomePage, 
     ScanPage 
    ], 
    providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, [ScreenSaver]] 
}) 
export class AppModule {}

个app.component.ts

@Component({ 
    template: ` 
     <ion-nav [root]="rootPage"></ion-nav> 
     <searching-modal id="loading" #Searching></searching-modal> 
    ` 
})

根页面

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { SearchingModalComponent } from '../../components/searching-modal/searching-modal'; 

@Component({ 
    selector: 'page-scan', 
    templateUrl: 'scan.html' 
}) 
export class ScanPage { 

    constructor(public navCtrl: NavController 
    , public ScreenSaverPrivid: ScreenSaver 
    , public SearchingModal: SearchingModalComponent 
    ) { } 

    openLoading() { 
     this.SearchingModal.show(); 
     console.log('openLoading'); 
    } 
}

系统信息：

科尔多瓦CLI：6.0.0

离子Framework版本：2.0 .0-rc.3

离子CLI版本：2.1.14

离子应用程序库版本：2.1.7

离子应用脚本版本：0.0.46

IOS部署版本：未安装

IOS-SIM版本：不安装

操作系统：Windows 10

节点版本：v6.9.1

版本的Xcode：未安装

编辑 [解决]谢谢Hadrien TOMA

移动<searching-modal id="loading" #Searching></searching-modal>
到 scan.html

来源

2016-12-03 I' m PROAMER

你只需要使用ViewChild，并把参考为您的孩子在您的父母模板中（如您已经完成的），here你可以看到一个简单的例子，说明如何做到这一点。

编辑：添加一些提示

而且，你必须调用@ViewChild在组件相对于具有参考的模板，你的情况，你有两个选择：移动<searching-modal id="loading" #Searching></searching-modal>到scan.html或移动openLoading(){...}和@ViewChild(...)...至app.component.ts。第一个选择对我来说是最好的。

来源

2016-12-03 11:00:38

谢谢Hadrien TOMA我变了，但无法正常工作。如何？

import { SearchingModalComponent } from '../../components/searching-modal/searching-modal'; 

@Component({ 
    selector: 'page-scan', 
    templateUrl: 'scan.html' 
}) 
export class ScanPage { 
    @ViewChild(SearchingModalComponent) SearchingModal: SearchingModalComponent 

    constructor(public navCtrl: NavController) {} 

    openLoading() { 
    this.SearchingModal.show(); 
    console.log('openLoading'); 
    } 
}

和

@ViewChild('Searching') SearchingModal: SearchingModalComponent

来源

2016-12-03 11:46:31

当使用'@ViewChild（ '搜索'）SearchingModal：SearchingModalComponent'这不起作用？ –

啊！我懂了！事实上，你必须在相对于具有引用的模板的组件中调用'@ ViewChild'，在这种情况下你有两个选择：move' '将'scan.html'或者将'openLoading（）{...}'和'@ViewChild（...）...'移动到'app.component.ts'。第一个选择对我来说是最好的。 –

谢谢。这是工作 –

离子2 - 如何从父

回答

相关问题