在 2 页中使用组件时显示 Ionic 4 错误答案

【问题标题】：Ionic 4 error showing on using component in 2 pages在 2 页中使用组件时显示 Ionic 4 错误
【发布时间】：2020-02-18 05:23:36
【问题描述】：

我创建了一个加载器组件，并尝试在我的页面中使用。问题是它在一个页面中工作正常，但是当我在其他页面中使用时，它显示错误

component is part of the declarations of 2 modules: AppModule in

这是我的第一页 category.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';    
import { LoaderComponent } from '../loader/loader.component';    //this is component i am using    
import { IonicModule } from '@ionic/angular';

import { CategoryPageRoutingModule } from './category-routing.module';

import { CategoryPage } from './category.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    CategoryPageRoutingModule
  ],
  declarations: [CategoryPage, LoaderComponent]
})
export class CategoryPageModule {}

我的另一个法师 login.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';    
import { IonicModule } from '@ionic/angular';    
import { LoaderComponent } from '../loader/loader.component'; //this is component


import { LoginPageRoutingModule } from './login-routing.module';

import { LoginPage } from './login.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    LoginPageRoutingModule,
  ],
  declarations: [LoginPage, LoaderComponent]
})
export class LoginPageModule {}

现在，如果我从第二页中删除我的组件，它工作正常。在 app.module.ts 中，我在声明数组中添加了我的组件。

【问题讨论】：

标签： angular ionic-framework ionic4

【解决方案1】：

我希望你一切都好。您应该考虑创建一个共享模块，使用这个共享模块，您将拥有您在所有应用程序中使用的所有组件/指令/管道。

查看此链接

https://angular.io/guide/sharing-ngmodules

【讨论】：

【解决方案2】：

我同意@bjdose 提供的建议。下面是一个如何实现共享组件的示例。

您需要有一个loader.module.ts 文件才能使此示例正常工作。在该文件中，您可以像这样声明和导出 Loader 组件...

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { IonicModule } from '@ionic/angular';

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

@NgModule({
    imports: [CommonModule, IonicModule],
    declarations: [LoaderComponent],
    exports: [LoaderComponent]
})
export class LoaderModule { }

现在它已导出，可在整个应用程序中使用。为了使用它，您需要做的就是将组件模块导入声明您要在其中使用它的页面的模块中。像这样......

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { LoaderModule } from '../loader/loader.module';

import { HomePage } from './home.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    LoaderModule
  ],
  declarations: [HomePage]
})
export class HomePageModule { }

希望他的帮助。

【讨论】：