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

Question

我得到的问题是，我有两个离子标签和两者的内容不显示。此外，内容可以在DOM中看到，但由于某种奇怪的原因没有显示出来。出于测试的原因，我只写了

<p>Test</p> 

进入我的主页，但它没有正确显示，但是它显示在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>包装模板，看起来你的模板缺少它