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

Posted 2021-04-21

我想在离子框架中使用标签布局，所以我开始制作它。默认情况下，它为我提供了3个选项卡，但现在我想为它添加更多选项卡。

我是通过在tabs文件夹和“tab.html”文件中进行更改来完成的。现在我想对我刚刚在“tabs.html”中添加的新标签页进行编码。为此，我在pages文件夹中创建了新选项卡的新文件夹。现在我想编写我添加的新选项卡。

我的问题是如何做到这一点。我尝试在该页面的文件夹中创建新的html文件。但这给了我一个错误..

请给我解决方案，因为我对离子骨架非常新。

答案

根据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）将根页面属性分配给选项卡模块内的根页面本身。例如：

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

请注意，您需要将选项卡根页导入Tabs模块（使用import{}命令）。至于你如何创建一个新页面，我假设你已经知道所有的步骤 - 如果你不知道，有很多在线教程可以帮助你。

另一答案

我提到了ionicframwork.docs//intro/tutorial/project-structure/这个教程充分解释了离子结构，对像我这样的初学者非常有帮助。它解释了如何向您的应用添加新标签。