Ionic 4 (Angular 7) - 共享组件问题

Question

I'm trying to do an extremely usual thing for such a framework like Angular. The goal is to use the same ( HeaderComponent ) component more than once through a shared module.

My shared.module.ts:

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

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

export class SharedModule {}

In app.module.ts I added this:

imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, SharedModule],

And in home.page.html I tried to render it this way:

<app-header></app-header>

It actually worked since browser showed me errors like

'ion-col' is not a known element

and so on for all the ionic components from the HeaderComponent .

I've found a solution for the issue over the Internet that suggest adding IonicModule.forRoot(HeaderComponent) to the imports array of the shared.module.ts , but this approach causes the following error:

'app-header' is not a known element

As if it is no longer available.

Answer 1

you additionally have to add the ionic module to your shared module like this:

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

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

export class SharedModule {}

if you are using ionic 4 you have to edit the import of IonicModule to this:

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

Answer 2

In my case the issue was that I was trying to include a custom component in a component that is opened with a modal. I needed to add my component to the parent page's module.

Answer 3

I had lot issues with trying to create a 3rd, ie shared module, so I found this to be very helpful: https://forum.ionicframework.com/t/ionic-4-create-shared-component-up-to-date-example-please/176887

I didn't follow the part about getting rid stuff but I did add a module to my component (in the same folder). Then in the other pages I was able to import this module on top then in the imports array and that worked.

Eventually I had to import other things like what Gary said above but that is just common sense.

Most tutorials I found online have you to create yet another component then use the module that comes with that. I was super confused following that line of thinking. I think it basically boils down to, you can share modules, but not components. Don't quote me but that is how I understand it now.

header.component.html

     <ion-header>
...

    </ion-header>

header.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { feedService } from "../services/feed.service";

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {
 ...
  constructor() {}

  ngOnInit() {}
}

header.module.ts

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

@NgModule({
    imports: [
      ...  
    ],
    declarations: [HeaderComponent],
    exports: [HeaderComponent],
  })
  export class HeaderModule{
  }

finally to use it else where, in that page's module.ts

import ... //other modules

import { HeaderModule  } from "../header/header.module";  //your relative path

@NgModule({
  imports: [
    //other modules
    HeaderModule,
  ],
  declarations: [],
  entryComponents: [],
})
export class MyPageModule {}

then on the that page's html file, I can use the selector declared in header.component.ts above.

<app-header ...></app-header>