有什么方法可以创建类似 ion-tabs 的东西吗？

Question

我想知道是否有任何方法可以创建自定义 ion-tabs 之类的结构。我是 angular 和 ionic 的新手，正在尝试做一些类似 ion-tabs 的事情。想象一个带有动态按钮的工具栏，这些按钮上面预定义了 ID's。通过点击标签按钮，显示的组件将根据按钮的ID改变。我想在单击按钮后加载它们，所以我认为它不是延迟加载。我想知道如果不刷新页面我是否可以做到这一点。谢谢。

Answer 1

你应该尝试做你自己的研究。

但是，是的，有办法，反正有人已经对离子标签进行了编码。在根页面上添加一个选项卡组件，在那里添加路由器链接，并在路由模块中提供页面。

我目前正在构建 Ionic app。这是我在侧面菜单中的导航 - 您只需将路由器链接添加到底部标签栏即可。

<ion-app>
  <ion-menu #menu side="start" menuId="menu" contentId="content">
    <ion-header>
      <ion-toolbar>
      <ion-title>{{ 'APP.TITLE' | translate }}</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-item>
          <select (change)="setLanguage($event.target.value)">
            <option value="fi">Suomi</option>
            <option value="en">English</option>
          </select>
        </ion-item>

        <!-- THIS IS THE NAVIGATION -->
        <ion-item *ngFor="let page of pages">
          <ion-button [routerLink]="page.url">{{ page.text | translate }}</ion-button>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>

  <!-- PAGES RENDER HERE -->
  <ion-router-outlet id="content"></ion-router-outlet>
</ion-app>

这是路由器。

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path: 'home',
    loadChildren: () => import('./my-observations/my-observations.module').then( m => m.MyObservationsPageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

有什么方法可以创建类似 ion-tabs 的东西吗？

Is there any way to create something like an ion-tabs?

ionic-framework

angular

ionic4