Блог

у меня проблема в том, что у меня две ионные вкладки, и содержимое обеих не отображается. Кроме того, контент можно увидеть в DOM, но он по какой-то странной причине не показан. По причинам проверки я литературоведчески просто написал

 <p>Test</p> 
 

на мою домашнюю страницу, но она отображается неправильно, однако она отображается в DOM
как видно здесь

у меня также их нет, как и ничего, что стоит в каких-либо css-файлах. Это просто чистый ионный без какой-либо стилизации :О.

Я надеюсь, что вы сможете мне помочь 🙂

приложение.модуль.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 {
}
 

вкладки.модуль.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 {}
 

вкладки-маршрутизация.модуль.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>
 

Попробуйте обернуть шаблон <ion-content></ion-content> так, чтобы он выглядел так, как будто в вашем шаблоне его нет