在离子框架中添加新选项卡

-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

在离子框架中添加新选项卡

回答

相关问题