CODEWITHSUNDEEP
angularionic-frameworkangular2-routing
Acer79
Acer79

Reputation: 213

angular component routing to home page

Hi Im having some issues routing back to some pages in Ionic. I'm trying to create a header component which will have a side menu that will link to different pages. But I also want to be able to turn off the header on certain pages. I'm able to see the header component on my media page, but the routerLink doesn't work. Here is my code;

header-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HeaderComponent } from './header.component';

const routes: Routes = [
  {
    path: '',
    component: HeaderComponent
  },
  {
      path: 'home',
      loadChildren: '../../../pages/landing/home/home.module#HomePageModule'
  }

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class HeaderRoutingModule {}

header.component.html

<ion-header>
  <ion-toolbar class="toolbar">
    <ion-buttons slot="secondary">
      <ion-button>
        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="primary">
      <ion-button color="danger">
        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="start">
      <ion-button routerLink="/home">Home</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

component.module.ts

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

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    ReactiveFormsModule,
    FormsModule
  ],
  declarations: [
      HeaderComponent
  ],

  exports: [
      HeaderComponent
  ]
})
export class PageComponentsModule { }

media.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

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

import { MediaPageRoutingModule } from './media-routing.module';

import { MediaPage } from './media.page';
import { PageComponentsModule } from '../components/page-component.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    PageComponentsModule,
    MediaPageRoutingModule
  ],
  declarations: [MediaPage]
})
export class MediaPageModule {}

Thanks in advance!

Upvotes: 0

Views: 243

Answers (1)

MrBowie20
MrBowie20

Reputation: 356

I have used i work around for this, had a simular case and this is how i fixed it. This might not be the best practice so please if anybody with more experience in rooting have something more sold i would also like to learn.

  1. i will remove routerLink and add (click) event <ion-button (click)="onHomeRoute()">Home</ion-button>
  2. then inside the controller i will:

Imports

 "import { Router } from '@angular/router';"

Constructor 

(private router: Router)

And then i will add this.router.navigate(['/home']); inside my click event like so,

onHomeRoute(){
this.router.navigate(['/home'])
}

i hope this will assist you as well and like i said if anybody have better solutions please comment i would also like to know. cheers.

Upvotes: 2

Related Questions