在ionic 3页面中注入自定义组件 [英] Inject Custom Component in ionic 3 page

问题描述

我刚刚创建了ionic中的加载组件，以便可以在从服务器获取数据(HTTP请求/解析度)时将其注入到任何页面中.我以某种方式设法将其导入到app.module.ts文件中(自第一次以来).现在我无法将其注入模板中

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

以下是我的自定义组件ts文件

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

和组件的HTML

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

还有很多CSS....输出是这样的加载程序输出

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

在我的app.module.ts中，我已在声明和提供程序数组中添加了该组件

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
  ]
})

现在我正试图在home.html文件中添加该组件

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>

最后在我的home.ts中，我这样做

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

我发现是功能

this.loadingComponent.show()

this.loadingComponent.show()

没有被调用..我无法操作 home.ts 文件中的 loadingComponent 变量..

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

推荐答案

由于ionic 3可进行延迟加载，因此您需要为自定义组件创建一个模块，然后将其添加到您的app.module.

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

然后在您的app.module中，导入刚创建的模块:

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

希望对您有帮助

这篇关于在ionic 3页面中注入自定义组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！