Ionic 4 Tabs无法完全呈现

Posted 2021-03-30

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

AppRoutingModule：

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

TabsPageRoutingModule：

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'
}];

LoginPage：

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() {

}}

有任何想法吗？谢谢！

答案

截至今天，即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

基本上，他们已将选项卡更新为按钮的标签栏，可用于加载离子路由器插座，离子内容或离子导航组件。

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

• 现在可以写成独立的标签栏（没有附加标签）
• 使用导航组件或纯内容元素
• 与shadow DOM一起使用，可以轻松自定义Tab Bar
• 完全控制选项卡栏内的元素
• 与其他具有不同渲染元素节点方式的框架很好地集成

另一答案

尝试改变

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

至

this.navCtrl.goRoot('/tabs'); to 

另一答案

步骤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');

另一答案

我有同样的问题。

在查看了我的html后，我意识到我遇到了问题，在“离子标签”中输入“标签”为空，这导致了问题，错误：

<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>

我希望它对你有所帮助