IONIC | 탭에서 새 페이지를 어떻게 설정합니까?

Question

안녕하세요

내 ionic 앱의 링크에 문제가 있습니다. 새 탭을 설정하려고하지만 링크에 문제가 있습니다.

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

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() { 

    } 
} 

어떻게 링크가 3, 4 탭을 추가하는 방법은 무엇입니까? 감사합니다.

Answer 1

탭 3 & 탭 4는 새 페이지에 연결해야합니다. 이러한 새 페이지를 먼저 만들어야합니다. 이온 CLI 다음, 사용이 페이지를 만들려면 명령 :

ionic generate page Chat 

ionic generate page Breaker 

(문서 https://ionicframework.com/docs/cli/generate/) :

난 강력하게 페이지를 생성하기 위해 CLI를 사용하는 것이 좋습니다 합니다. generate 매개 변수를 사용하면 내 보낸 페이지 (수출 된 모듈, CSS, HTML 등)에 필요한 모든 것을 스캐 폴딩합니다. 수동으로 페이지를 만들면 모든 페이지에서 필요한 중요한 스캐 폴딩 중 일부가 누락 될 수 있습니다. NPM을 사용하여 ionic CLI를 다운로드 할 수 있습니다. 그런 다음https://ionicframework.com/docs/cli/

, 당신은 예를 들어 탭 1과 탭 2

에 대한 참조 동일한 규칙을 따르의이 탭 3 ChatPage라는 페이지로 이동합니다 가정 해 봅시다. 탭 4는 BreakerPage 페이지로 이동합니다.

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.html 페이지를 수정 :처럼 tabs.ts는 볼 것이다. 당신이 제공 한 예제에서 마지막 탭에 대해 두 개의 결말이 있습니다.