Ionic6选项卡不显示选项卡中的内容，但在DOM中显示

Question

我遇到的问题是我有两个离子标签，两个标签的内容都没有显示出来。此外，可以在DOM中看到内容，但由于一些奇怪的原因，没有显示内容。出于测试的原因，我直接写了

<p>Test</p> 

在我的homePage中，但是它没有正确显示，但是它显示在DOM 如图所示中。

我也没有任何东西，就像任何css文件中没有任何东西。它只是纯离子，没有任何文体:O。

我希望你能帮我:)

app.module.ts

import {NgModule} from '@angular/core';
import {RouteReuseStrategy} from '@angular/router';

import {IonicModule, IonicRouteStrategy} from '@ionic/angular';
import {IonicStorageModule} from "@ionic/storage-angular";
import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {HttpClientModule} from "@angular/common/http";
import {BrowserModule} from "@angular/platform-browser";
import {StartPageModule} from "./views/start/start.module";
import {FormsModule} from "@angular/forms";
import {IonicSelectableModule} from "@ionic-selectable/angular";
import {HomePageModule} from "./views/home/home.module";

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    StartPageModule,
    FormsModule,
    HomePageModule,
    IonicStorageModule.forRoot(),
    IonicSelectableModule.forRoot(),
    HttpClientModule,
  ],
  providers: [{provide: RouteReuseStrategy, useClass: IonicRouteStrategy}],
  bootstrap: [AppComponent],
})
export class AppModule {
}

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-routing.module.ts

import { NgModule } from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import { TabsPage } from './tabs.page';    
const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children:[
      {
        path: 'hause',
        loadChildren: () => import('../../views/home/home.module').then( m => m.HomePageModule)
      },
      {
        path: 'settings',
        loadChildren: () => import('../../views/settings/settings.module').then( m => m.SettingsPageModule)
      }
    ]
  },
  {
    path:'',
    redirectTo: 'tabs/hause',
    pathMatch:'full'
  }
];

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

tabs.page.html

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

    <ion-tab-button tab="hause" href="#/tabs/home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="settings">
      <ion-icon name="cog"></ion-icon>
      <ion-label>Einstellungen</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

Answer 1

尝试用<ion-content></ion-content>包装模板，看上去您的模板缺少它