Ionic/Angular - 多条路线不工作

Question

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

好友
在我附近
全球

当页面首次加载时，它会显示 post 好友列表，当我单击“靠近我”按钮时，它应该将 post 替换为靠近我 post秒。这很好用。当我点击“朋友”时，页面上的内容并没有改变。 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);
  }
}

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

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

如果您只想显示好友或附近或全球，请改用子路由。

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

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

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

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

Ionic/Angular - 多条路线不工作

Ionic/Angular - Multiple routes not working

angular

ionic4