Question

我尝试将页眉组件（Ionic g组件）添加到几页。

“我的标题”组件有4个文件：html，scss，spec.ts和ts。当我将此组件添加到至少2页时，会出现此错误：

Error: Type HeaderComponent is part of the declarations of 2 modules: Tab1PageModule and ProductPageModule! Please consider moving HeaderComponent to a higher module that imports Tab1PageModule and ProductPageModule. You can also create a new NgModule that exports and includes HeaderComponent then import that NgModule in Tab1PageModule and ProductPageModule.

它的组件看起来像这样：

import { HeaderComponent } from './../../partials/header/header.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { ProductPage } from './product.page';

const routes: Routes = [
  {
    path: '',
    component: ProductPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],

  entryComponents:[HeaderComponent],
  declarations: [ProductPage,HeaderComponent]
})
export class ProductPageModule {}

我也尝试了几种添加该组件的方法，但我仍然停留在同一点上。当将NgModule添加到组件时，我会收到有关指令的错误（无法识别）。当添加ComoneModule（来自Ionic库）时，我的组件会显示在所有页面上，但是两种方式绑定不能正常工作（无法刷新）；

我将非常感谢您

编辑我尝试创建共享模型（Header.components.module.ts），但是当我使用共享模块时，出现以下错误：

core.js:15724 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'ngIf' since it isn't a known property of 'ion-buttons'.

import { HeaderComponent } from './header.component';
import { NgModule,CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@NgModule({

    imports: [CommonModule,
        FormsModule,
        IonicModule,RouterModule],        
    declarations: [
        HeaderComponent,

   ],
   exports: [
    HeaderComponent
   ],
   schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})

export class HeaderComponentsModule {}

Answer 1

声明组件时，应仅在一个模块中声明。如果要重复使用，则应将所述模块导入另一个模块。

您可以创建一个包含以下内容的共享模块：

imports: [MySharedComponent],
exports: [MySharedComponent]

在Tab1PageModule和ProductPageModule中：

imports: [MySharedModule]

Answer 2

解决此问题的最简单方法是为Headercomponent创建module.ts文件，并将其添加到imports数组。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { HeaderComponent } from './header.component';

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

将组件添加到多个页面。错误离子4

2 个答案: