ionicを勉強しているものです。以下のサイトを参考にionicのプロジェクトを作成しました。
https://www.webopixel.net/ios/1348.html
ionic serveを実行すると以下のページが表示されます。
ionic generate pageコマンドで新しいページを作成しアクセスしてみるとHOME画面にあった
「Home」「About」「Contact」のタブが表示されません。
別ページにも「Home」「About」「Contact」のタブさせたいのですが調べてみても解決できませんでした。
私としてはapp.htmlにtabの表示設定ができれば表示できるのではないかと考えています。
ionicにお詳しい方がいましたらご回答いただけないでしょうか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答1件
0
ベストアンサー
ionic全然詳しくないですが
ionic generate page another
で作った際
http://localhost:8100/another
にアクセスしたときタブを出したいならば
another.module.ts(ionic generate page anotherで作られたものを編集)
ts
1import { NgModule } from '@angular/core'; 2import { CommonModule } from '@angular/common'; 3import { FormsModule } from '@angular/forms'; 4import { Routes, RouterModule } from '@angular/router'; 5 6import { IonicModule } from '@ionic/angular'; 7 8import { AnotherPage } from './another.page'; 9import { AnotherPageRoutingModule } from './another.router.module'; 10 11const routes: Routes = [ 12 { 13 path: '', 14 component: AnotherPage 15 } 16]; 17 18@NgModule({ 19 imports: [ 20 CommonModule, 21 FormsModule, 22 IonicModule, 23 AnotherPageRoutingModule, 24 ], 25 declarations: [AnotherPage] 26}) 27export class AnotherPageModule {}
another.page.html(ionic generate page anotherで作られたものを編集)
html
1<ion-tabs> 2 3 <ion-tab-bar slot="bottom"> 4 <ion-tab-button tab="tab1"> 5 <ion-icon name="flash"></ion-icon> 6 <ion-label>Tab One</ion-label> 7 </ion-tab-button> 8 9 <ion-tab-button tab="tab2"> 10 <ion-icon name="apps"></ion-icon> 11 <ion-label>Tab Two</ion-label> 12 </ion-tab-button> 13 14 <ion-tab-button tab="tab3"> 15 <ion-icon name="send"></ion-icon> 16 <ion-label>Tab Three</ion-label> 17 </ion-tab-button> 18 </ion-tab-bar> 19 20</ion-tabs>
another.page.scss(ionic generate page anotherで作られたものそのまま)
scss
another.page.spec.ts(ionic generate page anotherで作られたものそのまま)
ts
1import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 2import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 3 4import { AnotherPage } from './another.page'; 5 6describe('AnotherPage', () => { 7 let component: AnotherPage; 8 let fixture: ComponentFixture<AnotherPage>; 9 10 beforeEach(async(() => { 11 TestBed.configureTestingModule({ 12 declarations: [ AnotherPage ], 13 schemas: [CUSTOM_ELEMENTS_SCHEMA], 14 }) 15 .compileComponents(); 16 })); 17 18 beforeEach(() => { 19 fixture = TestBed.createComponent(AnotherPage); 20 component = fixture.componentInstance; 21 fixture.detectChanges(); 22 }); 23 24 it('should create', () => { 25 expect(component).toBeTruthy(); 26 }); 27});
another.page.ts(ionic generate page anotherで作られたものそのまま)
ts
1import { Component, OnInit } from '@angular/core'; 2 3@Component({ 4 selector: 'app-another', 5 templateUrl: './another.page.html', 6 styleUrls: ['./another.page.scss'], 7}) 8export class AnotherPage implements OnInit { 9 10 constructor() { } 11 12 ngOnInit() { 13 } 14 15}
another.router.module.ts(新規作成)
ts
1import { NgModule } from '@angular/core'; 2import { RouterModule, Routes } from '@angular/router'; 3import { AnotherPage } from './another.page'; 4 5const routes: Routes = [ 6 { 7 path: 'another', 8 component: AnotherPage, 9 children: [ 10 { 11 path: 'tab1', 12 children: [ 13 { 14 path: '', 15 loadChildren: '../tab1/tab1.module#Tab1PageModule' 16 } 17 ] 18 }, 19 { 20 path: 'tab2', 21 children: [ 22 { 23 path: '', 24 loadChildren: '../tab2/tab2.module#Tab2PageModule' 25 } 26 ] 27 }, 28 { 29 path: 'tab3', 30 children: [ 31 { 32 path: '', 33 loadChildren: '../tab3/tab3.module#Tab3PageModule' 34 } 35 ] 36 }, 37 { 38 path: '', 39 redirectTo: '/tabs/tab1', 40 pathMatch: 'full' 41 } 42 ] 43 }, 44 { 45 path: '', 46 redirectTo: '/tabs/tab1', 47 pathMatch: 'full' 48 } 49]; 50 51@NgModule({ 52 imports: [ 53 RouterModule.forChild(routes) 54 ], 55 exports: [RouterModule] 56}) 57export class AnotherPageRoutingModule {}
でとりあえず出ました(ルーティングの関係で
http://localhost:8100/another
アクセスしたらすぐに
http://localhost:8100/tabs/tab1
に移動します)
※私が https://www.webopixel.net/ios/1348.html で作成した際は
tab1 tab2 tab3ってなったので適切に書き換えてください
投稿2019/07/05 07:24
総合スコア5545
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/07 13:58