web-dev-qa-db-ja.com

ルーターが子ルートに移動する-Angular 6

私は私のルートを次のように定義しました：

_const routes: Routes = [
    { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
    { path: 'faq', loadChildren: './faq/faq.module#FaqPageModule' },
    { path: 'terms', loadChildren: './terms/terms.module#TermsPageModule' }
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}
_

そしてこのように：

_const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: '/tabs/(list:list)',
        pathMatch: 'full',
      },
      {
        path: 'list',
        outlet: 'list',
        component: ListPage
      },
      {
        path: 'profile',
        outlet: 'profile',
        component: ProfilePage,
        canActivate: [AuthGuardService]
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(list:list)',
    pathMatch: 'full'
  }
];

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

コンポーネントのrouter .navigate()メソッドまたは一部のhtml要素のrouterLinkを使用して、ListPageまたはProfilePageに移動する方法に興味があります。

私はこのようなものを試しました

_this.router.navigate(['tabs/profile']);
_

または

_this.router.navigate(['profile']);
_

または

_this.router.navigate(['tabs(profile:profile)']);
_

このエラーが発生しました：

エラー：どのルートにも一致しません。 URLセグメント： ''

angularangular6angular-routerangular-routerlink
7
Ante Ereš

''と 'tabs'パスの下にプロファイルパスを追加することで解決策を見つけました：

  {
    path: 'profile',
    redirectTo: '/tabs/(profile:profile)',
    pathMatch: 'full'
  }

これで、プロファイルに移動できます

  this.router.navigate(['profile']);

このパスをtabs.router.module.tsに追加するのを忘れていました。そのため私は言及されたエラーを得ていました

1
Ante Ereš

listルートに移動する場合は、angularがtabsの子ルートであることを認識させる必要があります

this.router.navigate(['/tabs/list']);またはthis.router.navigate(['tabs','list']);

ルータナビゲートでは、ルートをstringの配列として渡す必要があるため、angularは親tabsを検索し、子ルートがあるかどうかを確認します何にもナビゲートしませんpathMatch: 'full'ない場合は、特定の子ルートに移動します

routerLinkでは、同じ配列を使用してルートを照合できます

ありがとう、ハッピーコーディング！

1
Rahul

特定のアウトレットに移動するときに、outletsのrouterLinkについて言及します。

[routerLink]="['tabs/profile', {outlets: {'profile': ['profile'], 'list': ['none']}}]"

最終的にルートの下に生成されます

http://localhost:4200/tabs/profile/(profile:profile//list:none)
1
Pankaj Parkar

どのコンポーネントからナビゲートするかによって異なります。

タブからリストページへ：

this.router.navigate(['/list'], {relativeTo: this.route});

ProfilePageからListPage（兄弟）に移動している場合は、これを使用する必要があります。

this.router.navigate(['../list'], {relativeTo: this.route});

上記のコードでは、ルートはActivatedRouteオブジェクトであるため、現在のルートからの相対ナビゲーションが可能になります。次のようにコンストラクタに注入できます。

constructor(private route: ActivatedRoute)

私も同じ問題に一度直面し、すべてを試しましたが、何もうまくいきませんでした。結局、Visual Studio CodeのIntellisenseがこれを助けてくれました。それが誰かを助けることを願っています。

1
Sachin Parashar

試してください：

this.router.navigate(['child component path'], {relativeTo: this.activatedRoute});

これは私の問題を解決しました。ハッピーコーディング:)

0
shivam gaddh
this.router.navigate(['/list'], {relativeTo: this.route});
this.router.navigate(['./list'], {relativeTo: this.route});
this.router.navigate(['../list'], {relativeTo: this.route});
this.router.navigate(['../../list'], {relativeTo: this.route});
this.router.navigate(['tabs/list'], {relativeTo: this.route});
this.router.navigate(['/tabs/list'], {relativeTo: this.route});

誰かを試してください、これがあなたを助けることを願っています。

0
shiva