Cordova 离子2-如何从父级访问组件功能

我有自定义加载（SearchingModalComponent） 我想在SearchingModalComponent中调用函数show（）

搜索ModalComponent

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 = "";
    }
}

应用程序模块.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 {}

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

应用程序组件.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 {}

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

系统信息：

• Cordova CLI:6.0.0
• 离子框架版本：2.0.0-rc.3
• IONAL CLI版本：2.1.14
• 爱奥尼亚应用程序库版本：2.1.7
• 爱奥尼亚应用程序脚本版本：0.0.46
• ios部署版本：未安装
• ios sim卡版本：未安装
• 操作系统：Windows 10
• 节点版本：v6.9.1
• Xcode版本：未安装

编辑 [已解决]谢谢你哈德里安·托马

移动

到 scan.html

---

您只需要使用

ViewChild

，并在父模板中为您的孩子添加一个引用（正如您已经做的那样），您就可以看到一个简单的示例来说明如何做到这一点

编辑：添加一些提示

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 {}

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

此外，您必须在相对于具有引用的模板的组件中调用

@ViewChild

，在您的情况下，您有两个选项：将

移动到

scan.html

或将

openload（）{…}

和

@ViewChild（…）

移动到

app.component.ts

。第一个选择对我来说是最好的