在離子框架中添加新選項卡

-3

我想在離子框架中使用選項卡布局，所以我開始製作它。默認情況下，它爲我提供了3個選項卡，但現在我想爲其添加更多選項卡。在離子框架中添加新選項卡

我通過更改選項卡文件夾和「tab.html」文件來做到這一點。現在我想對我剛添加到「tabs.html」中的新標籤頁進行編碼。爲此，我在pages文件夾中創建了新標籤的新文件夾。現在我想編碼我添加的新選項卡。

我的問題是如何做到這一點。我試圖通過在該頁面的文件夾內創建新的html文件。但這給了我一個錯誤..

請建議我的解決方案，因爲我對離子框架非常新。

2017-05-09 vithika

錯誤信息是什麼？此外，你可以顯示一些代碼（以更好地看到你的嘗試）？ –

<離子標籤[根] = 「tab1Root」 tabTitle = 「主頁」 tabIcon = 「家」> <離子標籤[根] = 「tab2Root」 tabTitle = 「更多」 tabIcon = 「更多」> <離子標籤[根] = 「tab3Root」 tabTitle = 「帳戶」 tabIcon = 「設置」> <離子標籤[根] = 「tab3Root」 tabTitle = 「購買」 tabIcon = 「購物車」> – vithika

上面是我的tabs.html文件的代碼。現在wh en我想爲新標籤添加新文件夾，我應該怎麼做？以及 – vithika

按照Ionic docs，創建一個新的標籤的方法是：

1）添加<ion-tab>標籤的HTML。例如：

<ion-tabs> 
    <ion-tab [root]="tab1Root" tabTitle="Tab 1"></ion-tab> 
    //... 
    <ion-tab [root]="myTabRoot" tabTitle="myTitle"></ion-tab> 
</ion-tabs>

2）像創建新頁面一樣創建新的根頁面。例如：

export class myRootPage { 
    constructor() { 
    } 
}

3）將根頁面屬性分配給Tabs模塊中的根頁面本身。例如：

export class Tabs { 
    myTabRoot = myRootPage; 
    constructor() { 
    } 
}

請注意，您將需要導入標籤根頁面到標籤模塊（使用import{}命令）。至於你如何創建一個新頁面，我假設你已經知道所有步驟 - 如果你不知道，網上有很多教程可以幫助你。

來源

2017-05-10 11:34:57

我需要在哪裏編碼第二步，哪個文件？導出類myRootPage { 構造函數（）{ } } – vithika

您需要創建一個新的TypeScript（.ts）文件。以myRootPage爲例，創建一個「my-root-page.ts」文件，然後將myRootPage代碼放入其中。當然，您還需要導入合適的Ionic和Angular組件以使其可以正常工作 - 如果需要，您可以複製其他選項卡的根頁面中的一個現有文件，並修改其標題（和內容）。這比從零開始創建頁面更簡單。 –

我能夠創建新的選項卡。感謝很多。它解決了我的問題 – vithika

我提到ionicframwork.docs//intro/tutorial/project-structure/ 本教程充分解釋了離子結構，對像我這樣的初學者非常有幫助。它解釋瞭如何將新選項卡添加到您的應用程序。

來源

2017-05-12 09:28:29 vithika

在離子框架中添加新選項卡

回答

相關問題