Ionic/Angular - Multiple routes not working

Question

I have an Ionic project setup using the tabs template. Here is my issue: I have an Activity tab that will have 3 buttons on the page:

Friends
Near Me
Global

When the page first load it will show a list of post for friends, when I click on the Near Me buttons it should replace the friends post with near me posts. this works great. When I click back on Friends, it does not change the content on the page. The URL changes, but the content does not.

tabs.router.module.ts:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'activity',
        outlet: 'activity',
        component: ActivityPage,
        children: [
          {
            path: 'friends',
            outlet: 'friends',
            component: FriendsComponent
          },
          {
            path: 'nearme',
            outlet: 'nearme',
            component: NearMeComponent
          },
          {
            path: 'global',
            outlet: 'global',
            component: GlobalComponent
          }
        ]
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(activity:activity/(friends:friends))',
    pathMatch: 'full'
  }
];

activity.page.html:

<ion-toolbar color="primary">

      <ion-segment class="tabs" [(ngModel)]="page">
        <ion-segment-button class="tab-label" value="friends" (click)="selectFriends()" margin-start>
          Friends
        </ion-segment-button>
        <ion-segment-button class="tab-label" value="near_me" (click)="selectNearMe()">
          Near Me
        </ion-segment-button>
        <ion-segment-button class="tab-label" value="global" (click)="selectGlobal()" margin-end>
          Global
        </ion-segment-button>
      </ion-segment>
    </ion-toolbar>

</ion-header>

<ion-content>
  <ion-router-outlet name="friends"></ion-router-outlet>
  <ion-router-outlet name="nearme"></ion-router-outlet>
  <ion-router-outlet name="global"></ion-router-outlet>
</ion-content>

activity.page.ts:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-activity',
  templateUrl: 'activity.page.html',
  styleUrls: ['activity.page.scss']
})
export class ActivityPage implements OnInit {

  page = 'friends'; // page is the ngModel name

  constructor(
    private router: Router
  ) { }

  ngOnInit() {
  }

  selectFriends() {
    this.router.navigateByUrl('/tabs/(activity:activity/(friends:friends)');
  }

  selectNearMe() {
    this.router.navigateByUrl('/tabs/(activity:activity/(nearme:nearme)');
  }

  selectGlobal() {
    this.router.navigateByUrl('/tabs/(activity:activity/(global:global)');
  }

  segmentChanged(ev: any) {
    console.log('Segment changed', ev);
  }
}

Again, my issue is the component on the page does not get replaced with the component that I am navigating to. I am using router-outlets to load the components on the page. When the page first loads the component loads fine, when I click on another button (e.g. Near Me) it will show the near me component, but when I click on Friends (after clicking on Near Me) it does not replace the near me component with the friends component.

In the pasted code, it looks like your `navigateByUrl` entries are missing a closing parenthesis? — DeborahK, Dec 20 '18 at 21:16
What is your version of Ionic? There is a beaking change for routing with [beta18](https://github.com/ionic-team/ionic/releases/tag/v4.0.0-beta.18) — Augustin R, Dec 21 '18 at 15:11
@DeborahK I correct this issue and it did not fix the problem. Although I was missing the closing parenthesis the URL was being routed properly in the browser. — iamthestreets, Dec 21 '18 at 15:56

score 1 · Accepted Answer · answered Dec 20 '18 at 21:20

I'm not an Ionic developer, but in a basic Angular application it would make more sense to define the friends, nearme and global routes as child routes, not named secondary routes.

This code:

<ion-content>
  <ion-router-outlet name="friends"></ion-router-outlet>
  <ion-router-outlet name="nearme"></ion-router-outlet>
  <ion-router-outlet name="global"></ion-router-outlet>
</ion-content>

Is telling Angular to build a "dashboard" type display with all three components possibly showing at the same time.

If you only want to show friends OR nearme OR global, use child routes instead.

This code defines one router outlet that you can route any of the content to.

<ion-content>
  <ion-router-outlet></ion-router-outlet>
</ion-content>

And change the route definitions to remove the outlet name:

    children: [
      {
        path: 'friends',
        component: FriendsComponent
      },
      {
        path: 'nearme',
        component: NearMeComponent
      },
      {
        path: 'global',
        component: GlobalComponent
      }
    ]

Thanks! This fixed my problem, but I am running into a transition issue where black bars show up when I switch between the pages — iamthestreets, Dec 21 '18 at 16:34
Do you have any route animations set? You may need to post a new question with some of the code/styles. — DeborahK, Dec 21 '18 at 20:05

Ionic/Angular - Multiple routes not working

1 Answers1

Linked