Ionic/Angular - 多条路线不起作用

我有一个使用选项卡模板的 Ionic 项目设置。 这是我的问题： 我有一个“活动”选项卡，页面上有 3 个按钮：

• Friends
• Near Me
• Global

当页面首次加载时，它将显示朋友的帖子列表，当我单击“我附近的”按钮时，它应该用我附近的帖子替换朋友的帖子。这很好用。当我点击“朋友”时，页面上的内容并没有改变。 URL 发生变化，但内容不变。

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

活动.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>

活动.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);
  }
}

同样，我的问题是页面上的组件没有被我导航到的组件替换。我正在使用路由器出口加载页面上的组件。当页面首次加载时，组件加载正常，当我单击另一个按钮（例如“Near Me”）时，它将显示“Near Me”组件，但是当我单击“Friends”（单击“Near Me”之后）时，它不会替换“Near Me”组件与朋友组件。

我不是 Ionic 开发人员，但在基本的 Angular 应用程序中，将 Friends、nearme 和全局路由定义为子路由（而不是命名的辅助路由）会更有意义。

这段代码：

<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 构建一个“仪表板”类型的显示，所有三个组件可能同时显示。

如果您只想显示朋友或附近的人或全球，请改用子路线。

此代码定义了一个路由器出口，您可以将任何内容路由到该路由器出口。

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

并更改路由定义以删除出口名称：

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