在 ionic 3 页面中注入自定义组件

Question

我刚刚在 ionic 中创建了一个加载组件，以便在从服务器（HTTP req/res）获取数据时将其注入任何页面作为加载。我以某种方式设法将它导入 app.module.ts 文件（因为这是我第一次）。 现在我无法将它注入我的模板中

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

@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.... 输出是这样的 Loader Output

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

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

现在我正在尝试将这个组件添加到我的 home.html 文件中

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

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

最后在我的 home.ts 我正在这样做

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
  }

请告诉我我哪里出错了.. 使用一些代码进行适当的解释将非常有帮助。 谢谢……

编辑：我发现是函数

this.loadingComponent.show()

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

Answer 1

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

之后，您必须在要使用的页面的每个模块中导入自定义组件的模块。

例如，如果您创建一个标头组件，模块看起来像这样：

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 中导入刚刚创建的模块：

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

在您想要使用自定义组件的每个组件中，您必须导入自定义组件的相同模块，它会是这样的：

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

希望对你有帮助