Question

我正在将离子成分ion-tabs和ion-tab-button与href="/tabs/path*"一起使用来浏览我的应用程序。

再现场景：

第一次单击path2（确定）
单击以path1（确定）

单击以path2（NOK）为基的href像/fr/tab/path2一样

<ion-tab tab="path1">
    <ion-router-outlet name="path1"></ion-router-outlet>
</ion-tab>
<ion-tab tab="path2">
    <ion-router-outlet name="path2"></ion-router-outlet>
</ion-tab>

<ion-tab-bar slot="bottom">
    <ion-tab-button tab="path1" href="/tabs/(path1:path1)">
        <ion-icon name="list-box"></ion-icon>
        <ion-label i18n>path1</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="path2" href="/tabs/(path2:path2)">
        <ion-icon name="albums"></ion-icon>
        <ion-label i18n>path2</ion-label>
    </ion-tab-button>
</ion-tab-bar>

路由模块标签：

{
    path: 'tabs',
    component: TabsPage,
    children: [
        {
            path: '',
            redirectTo: '/tabs/(path1:path1)',
            pathMatch: 'full'
        },
        {
            path: 'path1',
            outlet: 'path1',
            loadChildren: '../path1/path1.module#pathModule1'
        },
        {
            path: 'path2',
            outlet: 'path2',
            loadChildren: '../path2/path2.module#pathModule2',
        }
    ]
},
{
    path: '',
    redirectTo: '/tabs/(path1:path1)'
}

有人有主意吗？

Answer 1

我能够使其与routerLink指令一起使用

<ion-tab-button tab="path1" 
                [routerLink]="['/tabs/', { outlets: { 'path1': ['path1'] } }]"
                routerLinkActive="active"
                [routerLinkActiveOptions]="{ exact: true }"
>

Angular doc [routerLink] directive

但是，当我导航时，URL确实很丑陋，例如：

localhost:4200/fr/path1(path1:path1//path2:path2//path3:path3)

如果您有更清洁的解决方案，请不要犹豫！分享：）

编辑：

似乎已修复为离子 4.0.0-beta.17 ！

Angular 7路由错误base-href被添加到路径

1 个答案: