1. Add click event to item in. html file in Component:

<a class="home-menu-item" *ngFor="let item of menuItems" (click)="gotoPage(item)">
    <img class="" src="{{item.imgSrc}}">
    <span>{{item.subTitle}}</span>
  </a>

2. Pass the event to the home Page (Page) in the. ts file corresponding to the Component, passing the parameter:

// Declare events that need to be passed out
@Output()
itemAction:EventEmitter<any> = new EventEmitter<any>();

// Implement this method to trigger the delivery event
gotoPage(item:any){
    this.itemAction.emit(item);
  }

3. In the html file of the home Page, corresponding to the tag using this component, receive the events passed:

<! -- receive events passed -- >
<this-component (itemAction)="jumpAction($event)"></this-component>

4. In the. ts file of the home page, receive the passed events and implement your own method:

export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  // Implement corresponding methods
  jumpAction(menuItem:any) {
    console.log(menuItem); // This is the data passed in the component
    this.navCtrl.push(menuItem.destinatePage);
  }
}

5. If the new page is not import ed to app.module.ts If the file is in error, don't forget to report it

...
import {ComponentsModule} from "../components/components.module";
    // <! -- file corresponding to import required -- >
import {ServiceResourceListPageModule} from "../pages/home/service-resource-list/service-resource-list.module";
...

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    // <! -- add the corresponding page module in imports -- >
    ServiceResourceListPageModule,
    ComponentsModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}