1

我遇到了这个奇怪的问题，我已经启动了一个带有选项卡和角度路由的新应用程序。我添加了一个新的登录页面，登录后，用户被重定向到标签页。问题是重定向后，有时只渲染一个选项卡，有时会渲染两个选项卡。如果我刷新页面或直接转到它，则会显示所有 3 个选项卡。如果我在选项卡页面上启动应用程序，则再次显示所有 3 个选项卡。

应用路由模块：

const routes: Routes = [
{path: 'login', loadChildren: './login/login.module#LoginPageModule'},
{path: 'home', loadChildren: './tabs/tabs.module#TabsPageModule'},
{path: '', redirectTo: '/login', pathMatch: 'full'}];

标签页路由模块：

const routes: Routes = [
{
    path: '',
    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'
}];

登录页面：

export class LoginPage implements OnInit {
responseData: any;
userData = {'email': '', 'password': ''};
constructor(public navCtrl: NavController, public apiService: ApiService, public toastCtrl: ToastController) {
}
login() {
    this.apiService.login(this.userData).then((result) => {
        this.responseData = result;
        if (this.responseData.token) {
            console.log(this.responseData);
            localStorage.setItem('token', this.responseData.token);
            this.navCtrl.goRoot('/home');
        } else {
            console.log('User already exists');
        }
    }, (err) => {
        // Error log
        console.log(err);
    });
}
ngOnInit() {

}}

有任何想法吗？谢谢！

4

4 回答 4

2

截至今天，2018 年 11 月 1 日，Ionic 4 (4.0.0-beta.15) 中的选项卡已完全更改。

https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#400-beta15-2018-11-01

基本上，他们已将选项卡更新为按钮选项卡栏，可用于加载 ion-router-outlet、ion-content 或 ion-nav 组件。

此重构的其他一些好处包括：

  • 现在可以写成一个独立的标签栏（没有附加标签）
  • 适用于导航组件或纯内容元素
  • 使用 shadow DOM 并允许轻松自定义标签栏
  • 完全控制标签栏内的元素
  • 与具有不同渲染元素节点方式的其他框架很好地集成
于 2018-11-02T05:30:30.053 回答
0

我有同样的问题。

在查看了我的 HTML 后，我意识到我遇到了问题，在“ion-tab”中，输入“标签”是空的，这导致了问题，错误：

<ion-tab label="" icon="medkit" href="/(entidades:entidades)">
 <ion-router-outlet name="entidades">
 </ion-router-outlet>
</ion-tab>

我的解决方案：

<ion-tab label="The label of tab" icon="medkit" href="/(entidades:entidades)">
 <ion-router-outlet name="entidades">
 </ion-router-outlet>
</ion-tab>

希望对你有帮助

于 2018-10-04T02:03:45.253 回答
0

步骤1：

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: '/home/tabs/(home:home)',
    pathMatch: 'full'
}];

第2步：

this.navCtrl.goRoot('/home');
于 2018-08-18T14:40:52.430 回答
0

尝试改变

this.navCtrl.goRoot('/home');

至

this.navCtrl.goRoot('/tabs'); to
于 2018-08-08T18:46:39.037 回答