离子/角度-多个路线不起作用 [英] Ionic/Angular - Multiple routes not working

问题描述

我使用选项卡模板进行了Ionic项目设置. 这是我的问题: 我有一个活动"标签，该标签上的页面上有3个按钮:

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:

• 朋友
• 靠近我
• 全球

页面首次加载时，将显示朋友的帖子列表，当我单击我附近"按钮时，应将我附近的朋友"帖子替换为我附近的帖子".这很好.当我单击朋友"时，它不会更改页面上的内容. URL会更改，但内容不会更改.

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:

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:

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:

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.

推荐答案

我不是Ionic开发人员，但是在基本的Angular应用程序中，将朋友，近邻和全局路线定义为子路线更为有意义，而不是命名的辅助路由.

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.

此代码:

<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>

告诉Angular构建仪表板"类型的显示，并可能同时显示所有三个组件.

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

如果您只想显示朋友，nearme或全球朋友，请改用子路线.

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
      }
    ]

这篇关于离子/角度-多个路线不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！