IONIC |どのように私はタブの新しいページを設定するのですか？

Question

こんにちは

私のイオンアプリのリンクに問題があります。 新しいタブを設定しようとしていますが、リンクに問題があります。

tabs.html

<ion-tabs> 
    <ion-tab [root]="tab1Root" tabTitle="test1" tabIcon="md-mail"></ion-tab> 

    <ion-tab [root]="tab2Root" tabTitle="test2" tabIcon="md-contact"></ion-tab> 

    <ion-tab [root]="tab3Root" tabTitle="test3" tabIcon="md-chatbubbles"> 

    <ion-tab [root]="tab4Root" tabTitle="test4" tabIcon="md-beaker"></ion-tab> 
    </ion-tab> 
</ion-tabs> 

tabs.ts私は、タブ3と4へのリンクを追加するにはどうすればよい

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

import { ListPage } from '../list/list'; 
import { HomePage } from '../home/home'; 


@Component({ 
    templateUrl: 'tabs.html' 
}) 
export class TabsPage { 

    tab1Root = HomePage; 
    tab2Root = ListPage; 
    constructor() { 

    } 
} 

？ ありがとう！

Answer 1

タブ3 &タブ4は新しいページにリンクする必要があります。これらの新しいページを最初に作成する必要があります。これらのページを作成するには、イオンCLI以下の使用コマンド：

ionic generate page Chat 

ionic generate page Breaker 

を（ドキュメントhttps://ionicframework.com/docs/cli/generate/）：

私は強くあなたのページを作成するために、CLIを使用することをお勧めし。 generateパラメータを使用すると、ページに必要なすべてのもの（エクスポートされたモジュール、css、htmlなど）が足りなくなります。手動でページを作成すると、すべてのページで必要とされる貴重な足場が欠落する可能性があります。 ionic CLIはNPMを使用してダウンロードできます。その後https://ionicframework.com/docs/cli/

、あなたは例えば、タブ1とタブ2.

を参照まったく同じ規則に従う、のタブ3がChatPageというページに移動しますと言ってみましょう。そして、タブ4はブレイカーページと呼ばれるページに行きます。また、あなたのtabs.htmlページを修正

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

import { ListPage } from '../list/list'; 
import { HomePage } from '../home/home'; 
import { ChatPage } from '../chat/chat'; 
import { BreakerPage } from '../breaker/breaker'; 


@Component({ 
    templateUrl: 'tabs.html' 
}) 
export class TabsPage { 

    tab1Root = HomePage; 
    tab2Root = ListPage; 
    tab3Root = ChatPage; 
    tab4Root = BreakerPage; 

    constructor() { 

    } 
} 

：あなたのtabs.tsは次のようになります。あなたが提供した例では、最後のタブの2つの終わりがあります。