Question

我有一个Angular 6 / Ionic 4惰性加载选项卡模板，可以正常工作。主页上有一个路由器出口，选项卡上有次要的路由器出口。但是，我无法在显示标签页的主菜单中创建routerLink。

此routerLink仅在选项卡页面上尚未运行时才有效。例如

如果在测试页上：/ test
点击链接
正确链接到：标签/（关于：关于）

链接到标签页

如果已经在“首页”标签上（并单击链接），则最终网址为：

/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 {}

Answer 1

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

<base href="/">

此部分的值可能会有所不同，具体取决于您的根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'
      }
    ];

Answer 2

也许使用相对路径：

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

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

带有选项卡的Angular 6 RouterLink

2 个答案: