Question

我遇到这个奇怪的问题，我已经开始使用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() {

}}

有什么想法吗？谢谢！

Answer 1

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

基本上，他们已将标签更新为按钮的标签栏，可用于加载离子路由器出口，离子含量或离子导航组件。

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

现在可以编写为独立的选项卡栏（没有附加的选项卡）
使用导航组件或纯内容元素
使用影子DOM，并可以轻松自定义标签栏
完全控制标签栏内的元素
与其他呈现元素节点方式不同的框架很好地集成

Answer 2

尝试更改

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

到

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

Answer 3

第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');

Answer 4

我遇到了同样的问题。

查看HTML之后，我意识到我有问题，在“ ion-tab”中，输入“ label”为空，这会导致问题，即错误：

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

希望对您有帮助

Ionic 4标签无法完全呈现

4 个答案: