Ionic ViewChild（选项卡）未加载主页答案

【问题标题】：Ionic ViewChild (Tabs) not loading main pageIonic ViewChild（选项卡）未加载主页
【发布时间】：2020-06-03 11:15:33
【问题描述】：

问题是 viewchild 没有按预期工作，但是当我删除 viewchild 时，页面确实可以工作，但我仍然需要输入页面名称，所以我需要 viewchild。

我的 Ionic 版本 5.4.16

错误

错误错误：“未捕获（承诺）：TypeError：this.outlet is 未定义选择@http://localhost:8100/vendor.js:105637:33 ngOnInit@http://localhost:8100/tabs-tabs-module.js:132:19

编辑：tabs.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { TabsPageRoutingModule } from './tabs-routing.module';

import { TabsPage } from './tabs.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    TabsPageRoutingModule
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {}

这是我的 tabs.page.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonTabs } from '@ionic/angular'

@Component({
   selector: 'app-tabs',
   templateUrl: './tabs.page.html',
      styleUrls: ['./tabs.page.scss'],
    })
export class TabsPage implements OnInit {

  @ViewChild('tabs', {static: true}) tabs:IonTabs

  constructor() { }

  ngOnInit() {
     this.tabs.select('feed')
  }
}

我的 HTML (tabs.page.html)

<ion-tabs #tabs>
  <ion-tab-bar slot="bottom">

    <ion-tab-button tab="feed">
      <ion-icon name="send"></ion-icon>
      <ion-label>Feed</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="uploader">
      <ion-icon name="send"></ion-icon>
      <ion-label>Upload</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="profile">
      <ion-icon name="send"></ion-icon>
      <ion-label>Profile</ion-label>
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>

我的 tabs-routing-moudule.ts

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';

    import { TabsPage } from './tabs.page';

    const routes: Routes = [
      {
        path: '',
        component: TabsPage,
        children: [
          {path: 'feed', loadChildren: '../feed/feed.module#FeedPageModule'},
          {path: 'uploader', loadChildren: '../uploader/uploader.module#UploaderPageModule'},
          {path: 'profile', loadChildren: '../profile/profile.module#ProfilePageModule'}
        ]
      }
    ];

    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule],
    })
    export class TabsPageRoutingModule {}

如果这有帮助，我还将包括我的 app.routing.module.ts

    import { NgModule } from '@angular/core';
    import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

    const routes: Routes = [
      { path: '', redirectTo: 'tabs', pathMatch: 'full' },
      { path: 'login', loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)},
      {
        path: 'register',
        loadChildren: () => import('./register/register.module').then( m => m.RegisterPageModule)
      },
      {
        path: 'tabs',
        loadChildren: () => import('./tabs/tabs.module').then( m => m.TabsPageModule)
      },
    ];

    @NgModule({
      imports: [
        RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
      ],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

【问题讨论】：

你能解释得更好吗？ 'viewchild' 不能正常工作是什么意思？
@MaríaCristinaFernándezLópez - 你好，好吧.. viewchild 存在于我的tab.page.ts 我需要它，所以当我转到我的localhost:8100 时，应该加载第一个标签feed。但后来我收到一个错误ERROR Error: "Uncaught (in promise): TypeError: this.outlet is undefined select@http://localhost:8100/vendor.js:105637:33 ngOnInit@http://localhost:8100/tabs-tabs-module.js:132:19我没有在我的问题中包含错误。抱歉需要更新
你能给我看看tabs-tabs-module.js pelase的代码吗？
@MaríaCristinaFernándezLópez 请务必查看上面的编辑代码，P.S 刚刚包含了我所有的 tabs 文件夹文件。谢谢
@MaríaCristinaFernándezLópez - 嗨，澄清一下，tabs-tabs-module.js 与标签链接有关......您可以在上面看到。

标签： angular ionic-framework ionic5

【解决方案1】：

添加代码块

ngOnInit() {
     this.tabs.select('feed')
  }

进入你的tabs.module.ts而不是tabs.page.ts。

【讨论】：