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

Question

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

我的 Header 组件有 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 文件并将其添加到导入数组中。

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

Add Componets to several pages. Error | Ionic 4

ionic-framework

angular

ionic4