我有一个Angular 6延迟加载选项卡模板,可以正常工作 . 主页面有一个路由器插座,标签有二级路由器插座 . 但是,我无法在主菜单中创建显示标签页的routerLink .
此routerLink仅在标签页上尚未显示时才有效 . 例如
-
如果在测试页面上:/ test
-
点击链接
-
正确链接到:tabs /(about:about)
链接到标签页
如果已经在主页选项卡上(并单击链接),则最终的URL为:
/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 {}