带有选项卡的 Angular 6 RouterLink

Posted 2023-02-19

【中文标题】带有选项卡的 Angular 6 RouterLink

【英文标题】：Angular 6 RouterLink With Tabs

【发布时间】：2018-12-16 00:57:23

【问题描述】：

我有一个可以正常工作的 Angular 6 / Ionic 4 延迟加载选项卡模板。主页有一个路由器插座，选项卡有辅助命名路由器插座。但是，我无法在显示标签页的主菜单中创建 routerLink。

此 routerLink 仅在不在标签页上时才有效。例如

如果在测试页面上：/test 点击链接

正确链接到：tabs/(about:about)

链接到标签页

如果已经在主页选项卡上（并单击链接），最终网址是：

/tabs/(about:about//home:home)

如何创建始终链接到以下内容的 routerLink？

/tabs/(about:about)

我用这个打字稿得到了同样的行为：

this.router.navigate(['/tabs',  outlets:  about: ['about']]);

但是，这个打字稿可以正常工作：

this.router.navigateByUrl('/tabs/(about:about)');

app.component.html

<ion-app>
  <nav>
    <a [routerLink]="['/tabs',  outlets:  about: 'about'  ]">
      This link only works if NOT already on tab page.
    </a>
    <ion-button (click)="navigateByUrl()">This always works!</ion-button>
  </nav>
<router-outlet></router-outlet>
</ion-app>

app-routing.module.ts

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

const routes: Routes = [
   path: '', loadChildren: './pages/tabs/tabs.module#TabsPageModule' ,
   path: 'test', loadChildren: './pages/test/test.module#TestPageModule' 
];
@NgModule(
  imports: [RouterModule.forRoot(routes,  enableTracing: true  )],
  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  HomePage  from '../home/home.page';
import  AboutPage  from '../about/about.page';
import  ContactPage  from '../contact/contact.page';

const routes: Routes = [
  
    path: 'tabs',
    component: TabsPage,
    children: [
      
        path: 'home',
        outlet: 'home',
        component: HomePage
      ,
      
        path: 'about',
        outlet: 'about',
        component: AboutPage
      ,
      
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      
    ]
  ,
  
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  
];

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

【问题讨论】：

您能否在plnkr.co/edit/?p=catalogue 中创建示例以正确理解您的问题

你使用哪个版本的 ionic 框架，ionic 3 还是 ionic 4？

【参考方案1】：

在您的 index.html 中，您应该添加以下行。

<base href="/"> 

heref 部分可能有不同的值，具体取决于您的根 URL。

现在在您的路由配置中编写如下路由配置。

       const routes: Routes = [
       
         path: 'tabs',
         component: TabsPage,
         children: [
          
            path: 'home',
            outlet: 'home',
            component: HomePage
          ,
          
            path: '',
            redirectTo: 'home',
            pathMatch: 'full'
          ,
          
            path: 'about',
            outlet: 'about',
            component: AboutPage
          ,
          
            path: 'contact',
            outlet: 'contact',
            component: ContactPage
          
        ]
      ,
      
        path: '',
        redirectTo: 'tabs',
        pathMatch: 'full'
      
    ];

【参考方案2】：

也许使用相对路径：

 <a [routerLink]="['../tabs',  outlets:  about: 'about'  ]">
      try this one
    </a>

文档： https://angular.io/guide/router#using-relative-paths