0

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

我的离子版本5.4.16

错误

错误错误：“未捕获（承诺）：TypeError：this.outlet未定义select@ 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 { }
4

1 回答 1

0

添加代码块

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

进入你的tabs.module.tsNOT tabs.page.ts。

于 2020-07-04T18:57:57.070 回答