Question

我刚刚在离子中创建了一个加载组件，以便我可以在从服务器（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>

最后在我的家里。我正在做这个

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。

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

示例如果您创建标题组件，模块看起来像这样：

＆＃13;

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

＆＃13;

然后在app.module中导入刚刚创建的模块：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

希望这能帮到你

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

1 个答案: