Ionic 4 选项卡未完全渲染答案

【问题标题】：Ionic 4 Tabs not rendering completelyIonic 4 选项卡未完全渲染
【发布时间】：2018-11-02 13:30:30
【问题描述】：

我遇到了这个奇怪的问题，我已经启动了一个带有选项卡和角度路由的新应用程序。我添加了一个新的登录页面，登录后，用户被重定向到标签页。问题是重定向后，有时只渲染一个选项卡，有时会渲染两个选项卡。如果我刷新页面或直接转到它，则会显示所有 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'
}];

登录页面：

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

}}

有什么想法吗？谢谢！

【问题讨论】：

你得到什么了吗？我也被困在这里。 stackoverflow.com/questions/52341660/…

标签： ionic-framework tabs angular6 ionic4

【解决方案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

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

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

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

【讨论】：

【解决方案2】：

尝试改变

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

到

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

【讨论】：

不工作，我为标签路径尝试了很多组合。不是找不到页面，而是找到了，当页面出现时，只呈现一个Tab

【解决方案3】：

第一步：

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

【讨论】：

你能帮我吗？ stackoverflow.com/questions/52341660/…

【解决方案4】：

我遇到了同样的问题。

查看我的 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>

希望对你有帮助

【讨论】：

对不起，错误仍然存在，但您仍然可以检查