離子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 - 如何從父

回答

相關問題