Inject Custom Component in ionic 3 page

问题:

I just created a loading component in ionic so that i can inject it in any page as loading while getting data from server (HTTP req/res). I somehow managed to import it in app.module.ts file (since its my first time). Now i am not able to inject it in my template

Following is my custom component ts file

@Component({
  selector: 'loader',
  templateUrl: 'loader.html'
})

export class LoaderComponent {

  text: string;
  splash: boolean;
  constructor() {
    this.splash = false;

  }

  show(){
    this.splash = true;
  }

  hide(){
    this.splash = false;
  }
}

and the HTML of the component

<div id="custom-overlay" [style.display]="splash ? 'flex': 'none'">
  <div class="flb">
    <div class="Aligner-item Aligner-item--top"></div>
    <img src="assets/imgs/logo.png">
    <div class="Aligner-item Aligner-item--bottom"></div>
    <div class="brand-name">
      <strong>TULASIBAUG</strong>
      <p>NOW ONLINE</p>
    </div>
  </div>
</div>

And also lots of CSS.... The Output is something like this Loader Output

In my app.module.ts i have added the component in declaration and providers array

import { LoaderComponent } from '../components/loader/loader';
@NgModule({
  declarations: [ 
    LoaderComponent
  ],
  providers: [
    LoaderComponent
  ]
})

Now i am trying to add this component in my home.html file

<loader></loader>
  <ion-header>
    <!-- Some Code -->
  </ion-header>

  <ion-content>
    <!-- Some Code -->
  </ion-content>

And finally in my home.ts i am doing this

import { LoaderComponent } from '../../components/loader/loader';

  constructor(public dataProvider: DataProvider,public loaderComponent:LoaderComponent) {
    this.getPlacesData();
  }

  getPlacesData(){
    let instance = this;
    this.loaderComponent.show();
    this.dataProvider.getPlaces().subscribe((res)=>{
      setTimeout(function(){
        instance.loaderComponent.hide();
      },2000);
    }) // provider end
  }

Please tell me where did i went wrong.. A proper explanation with some code will be very helpful. Thank you....

EDIT: Something i figured out was that the function

this.loadingComponent.show()

is not getting called.. I am not able to manipulate any variables of loadingComponent from home.ts file..

回答1:

Since ionic 3 works with lazy loading, you need to create a module for your custom component and then add it to your app.module.

After, you have to import the module of your custom component in every module of pages that you want to use it.

Example if you create a header component, the module look something like this:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Header } from './header';

@NgModule({
  declarations: [
    Header
  ],
  imports: [
    IonicPageModule.forChild(Header),
  ],
  exports: [Header]
})
export class HeaderModule {}

then in your app.module you import the module that just create:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { HttpModule }  from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MyApp } from './app.component';

import { HeaderModule } from '../pages/header/header.module';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    HeaderModule,
    BrowserModule,
    BrowserAnimationsModule,
    IonicModule.forRoot(MyApp,{
      backButtonIcon: 'ios-arrow-back',
      autoFocusAssist: false,
      scrollAssist : false
    }),
    HttpModule,
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [  {provide: ErrorHandler, useClass: IonicErrorHandler},
                AppTema, 
                StatusBar,
                Database,
                SplashScreen,
                File,
                CallNumber,
                NativeAudio,
                Media,
                GoogleAnalytics
            ]
})
export class AppModule {}

finshing in each component that you want use your custom component you have to import the same module of your custom component, it would be something like this:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ConceptosPage } from './conceptos';
import { HeaderModule } from '../header/header.module';

@NgModule({
  declarations: [
    ConceptosPage
  ],
  imports: [
    IonicPageModule.forChild(ConceptosPage),
    HeaderModule
  ],
})
export class ConceptosPageModule {}

hope this help you