web-dev-qa-db-ja.com

Ionic 4-Angularルーター

現在、ionicとタブレイアウトの新しいベータバージョン4でアプリケーションを開発しています。

新しいangularルーターでのナビゲーションがどのように機能するかはまだよくわかりません

私のapp-routing.module.tsは

_import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: 'welcome', loadChildren: './pages/welcome/welcome.module#WelcomePageModule' },
  { path: 'login', loadChildren: './pages/auth/login/login.module#LoginPageModule' },
  { path: 'registration', loadChildren: './pages/auth/registration/registration.module#RegistrationPageModule' },
  { path: 'app', loadChildren: './pages/tabs/tabs.module#TabsPageModule'},
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}
_

私のtabs.router.module.tsは次のとおりです。

_import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TabsPage } from './tabs.page';
import { ContactPage } from '../contact/contact.page';
import { EventOverviewPage } from '../event-overview/event-overview.page';
import { EventDetailPage } from '../event-detail/event-detail.page';
import { ProfilPage } from '../profil/profil.page'


const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'eventOverview',
        outlet: 'eventOverview',
        component: EventOverviewPage,
      },
      {
        path: 'event/:eventId',
        component: EventDetailPage,
        outlet: 'eventOverview'
      },
      {
        path: 'profil',
        outlet: 'profil',
        component: ProfilPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}
_

と

_router.navigateByUrl('/app/tabs/(eventOverview:eventOverview)')
_

概要ページに移動でき、次のカスタムIDでeventDetailページにアクセスできます。

_this.router.navigateByUrl('app/tabs/(eventOverview:event/${id})')
_

現時点で私の問題は、EventDetailPageに複数のパラメーターを渡す必要があることです。私はこれがrouter.navigate([])関数で可能だと思ったので、試しました

_this.router.navigate(['/app/tabs/eventOverview'], { queryParams: { eventId: eventId} });
_

そして

_this.router.navigate(['/app/tabs/(eventOverview:event)'], { queryParams: { eventId: eventId} });
_

しかし、EventDetailsPageに移動しようとすると、常にエラーがスローされます

エラーエラー：キャッチされません（約束）：エラー：どのルートにも一致しません。 URLセグメント： 'app/tabs'エラー：どのルートにも一致できません。 URLセグメント：「アプリ/タブ」

ルーティングの仕組みを完全に理解していないようです。

誰かが私にヒントを与えることができればいいでしょう

//編集：

ここにstackblitzの例があります。 https://stackblitz.com/edit/github-ionic4navigation-emxydw

開始画面のリストで最初に項目をクリックすると、eventDetailsに移動できます。後に戻ってもう一度試してみると、もう機能しません。

そして、私はcreate-event.pageからeventDetails.pageにナビゲートする方法を見つけることができません。

angulartypescriptionic-frameworkangular-ui-router
10
Stevetro

フォローしてみましたか？

this.router.navigate(['/app/pages/tabs/event', { eventId: eventId}]);

ルートpath: 'event/:eventId',はクエリパラメータをサポートします。

angular ionic with routing： https://www.joshmorony.com/using-angular-routing-withについての詳細は、 -ionic-4 /

1
maerlin

どのルートを選択すればよいかわからないので、文句を言っていると言えます...

編集

昨夜これでしばらく遊んでみましたが、あなたはコードがすべて正しい軌道に乗っていると思います。それはルーティングモジュールの構成/構造に関係していると思います。始まりますが、tabs.router.module.tsで失われます。これは、event-overview-routing.module.tsおよびevent-detail-routing.module.tsファイル用のコンポーネントを参照しているためです。

 children: [
      {
        path: 'eventOverview',
        outlet: 'eventOverview',
        component: EventOverviewPage,
      },
      {
        //path: 'event/:eventId',
        path: 'eventOverview/eventDetails',
        outlet: 'eventOverview',
        component: EventDetailPage,
        children: [
          {
            path: ':id',
            component: EventDetailPage
          },
           {
            path: ':id/:Status',
            component: EventDetailPage
          }
        ]
      },
      {
        path: 'profil',
        outlet: 'profil',
        component: ProfilPage
      }

EventDetailPageに移動する場合は、パスを一致させる必要がありますpath: 'event/:eventId'

0
JBoothUA