質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.13%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 464

Linkey

score 45

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にお詳しい方がいましたらご回答いただけないでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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ってなったので適切に書き換えてください

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/07 22:58

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる