[英]Angular 6 RouterLink With Tabs
I have a Angular 6 / Ionic 4 lazy load tabs template that works correctly.我有一个可以正常工作的 Angular 6 / Ionic 4 延迟加载选项卡模板。 The main page has one router-outlet and the tabs have secondary named router-outlets.
主页有一个路由器插座,选项卡有二级命名路由器插座。 However, I cannot create a routerLink in the main menu that displays a tab page.
但是,我无法在显示标签页的主菜单中创建 routerLink。
This routerLink works only if NOT already on a tab page.此 routerLink 仅在尚未出现在标签页上时才有效。 eg
例如
Correctly links to: tabs/(about:about)正确链接到:tabs/(about:about)
Link to tab page链接到标签页
If already on the home tab (and click the link) the final url is:如果已经在主页选项卡上(并单击链接),则最终 url 为:
/tabs/(about:about//home:home)
How do I create a routerLink that always links to the following?如何创建始终链接到以下内容的 routerLink?
/tabs/(about:about)
I get the same behavior with this typescript:我用这个打字稿得到了相同的行为:
this.router.navigate(['/tabs', { outlets: { about: ['about']}}]);
However, this typescript works correctly:但是,此打字稿可以正常工作:
this.router.navigateByUrl('/tabs/(about:about)');
app.component.html应用程序组件.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 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 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 {}
In your index.html you should add below line.在您的 index.html 中,您应该添加以下行。
<base href="/">
heref part may have different value depending on your root URL. heref 部分可能具有不同的值,具体取决于您的根 URL。
Now in your routing configuration write route configuration like below.现在在你的路由配置中写路由配置,如下所示。
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'
}
];
Maybe use relative paths :也许使用相对路径:
<a [routerLink]="['../tabs', { outlets: { about: 'about' } }]">
try this one
</a>
docs : https://angular.io/guide/router#using-relative-paths文档: https : //angular.io/guide/router#using-relative-paths
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.