离子/角度 - 多条路线不起作用

Question

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

• 朋友
• 靠近我
• 全球

当页面第一次加载时，它会显示朋友的帖子列表，当我点击靠近我的按钮时，它应该用我附近的帖子替换朋友的帖子。这很好用。当我点击好友时，它不会更改页面上的内容。 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'
  }
];

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);
  }
}

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

Answer 1

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

这段代码：

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