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应用程序中，将朋友，近邻和全局路线定义为子路线，而不是命名为次要路线更有意义。

此代码：

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

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

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

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

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

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

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

1 个答案: