ionicでタブを全ページで表示させたい

Question

ionicを勉強しているものです。以下のサイトを参考にionicのプロジェクトを作成しました。
https://www.webopixel.net/ios/1348.html

ionic serveを実行すると以下のページが表示されます。

HOME表示時

ionic generate pageコマンドで新しいページを作成しアクセスしてみるとHOME画面にあった
「Home」「About」「Contact」のタブが表示されません。

別ページ表示時

別ページにも「Home」「About」「Contact」のタブさせたいのですが調べてみても解決できませんでした。
私としてはapp.htmlにtabの表示設定ができれば表示できるのではないかと考えています。
ionicにお詳しい方がいましたらご回答いただけないでしょうか？

Answer 1

ionic全然詳しくないですが
ionic generate page another
で作った際
http://localhost:8100/another
にアクセスしたときタブを出したいならば

another.module.ts(ionic generate page anotherで作られたものを編集)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

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

import { AnotherPage } from './another.page';
import { AnotherPageRoutingModule } from './another.router.module';

const routes: Routes = [
  {
    path: '',
    component: AnotherPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    AnotherPageRoutingModule,
  ],
  declarations: [AnotherPage]
})
export class AnotherPageModule {}

another.page.html(ionic generate page anotherで作られたものを編集)

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>Tab Three</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

another.page.scss(ionic generate page anotherで作られたものそのまま)

another.page.spec.ts(ionic generate page anotherで作られたものそのまま)

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { AnotherPage } from './another.page';

describe('AnotherPage', () => {
  let component: AnotherPage;
  let fixture: ComponentFixture<AnotherPage>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ AnotherPage ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AnotherPage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

another.page.ts(ionic generate page anotherで作られたものそのまま)

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

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

  constructor() { }

  ngOnInit() {
  }

}

another.router.module.ts(新規作成)

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AnotherPage } from './another.page';

const routes: Routes = [
  {
    path: 'another',
    component: AnotherPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: '../tab3/tab3.module#Tab3PageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

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

でとりあえず出ました(ルーティングの関係で
http://localhost:8100/another
アクセスしたらすぐに
http://localhost:8100/tabs/tab1
に移動します)

※私が https://www.webopixel.net/ios/1348.html で作成した際は
tab1 tab2 tab3ってなったので適切に書き換えてください

Comments

[Linkey]

ありがとうございます。試してみます。