Angular 离子/角度-多条路线不工作

我有一个爱奥尼亚项目设置使用标签模板。 这是我的问题： 我有一个“活动”选项卡，页面上将有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>

---

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

我不是离子开发者，但是在一个基本的角度应用程序中，将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>

---

在粘贴的代码中，您的navigateByUrl条目似乎缺少右括号？您的爱奥尼亚版本是什么？使用@DeborahK进行路由时有一个明显的变化，我纠正了这个问题，但它没有解决这个问题。虽然我缺少右括号，但URL在浏览器中被正确路由。@AugustinR我使用的是4.0.0-beta.15谢谢！这解决了我的问题，但我遇到了一个过渡问题，当我在页面之间切换时会出现黑条。您是否设置了路线动画？您可能需要发布一个新问题，其中包含一些代码/样式。

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

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

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