Ionic 4/Angular 以原子方式打开默认选项卡答案

【问题标题】：Ionic 4/Angular Have default tab open atomicallyIonic 4/Angular 以原子方式打开默认选项卡
【发布时间】：2020-08-24 13:36:16
【问题描述】：

我有一个带有 2 个标签的页面。当我转到该页面时，它一开始是空白的，只显示 2 个选项卡按钮。单击任一按钮后，将显示选项卡的内容。我怎样才能做到这一点，当我导航到该页面时，默认情况下其中一个选项卡已经打开？这是我的html：

<ion-segment [(ngModel)]="list">
          <ion-segment-button value="list">list view</ion-segment-button>
          <ion-segment-button value="cal">calendar view</ion-segment-button>
        </ion-segment>
      <div [ngSwitch]="list">
        <div *ngSwitchCase="'list'">
         **list tab contents**
        </div>
        <div *ngSwitchCase="'cal'">
        **calendar tab contents**
        </div>
      </div>
    </div>

【问题讨论】：

标签： angular ionic-framework ionic4 angular8 ion-segment

【解决方案1】：

我已经在您选择的选项卡的 div 中使用此附加代码 ngSwitchDefault 解决了这个问题

你的代码会是这样的

<ion-segment [(ngModel)]="list">
      <ion-segment-button value="list">list view</ion-segment-button>
      <ion-segment-button value="cal">calendar view</ion-segment-button>
    </ion-segment>
  <div [ngSwitch]="list">
    <div *ngSwitchDefault="'list'">
     **list tab contents**
    </div>
    <div *ngSwitchCase="'cal'">
    **calendar tab contents**
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

您应该在标签页路由模块的默认路径中设置它。这里有一个完整的例子：

tabs-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'tab-one',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab-one/tab-one.module').then(m => m.TabOnePageModule)
          }
        ]
      },
      {
        path: 'tab-two',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab-two/tab-two.module').then(m => m.TabTwoPageModule)
          }
        ]
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tab-one', // This will be the default tab to load
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

tabs.module.ts

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TabsPageRoutingModule } from './tabs-routing.module';
import { TabsPage } from './tabs.page';;

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    TabsPageRoutingModule // You import the routing module in the tabs page module
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {}

tabs.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.page.html',
  styleUrls: ['./tabs.page.scss'],
})
export class TabsPage {

  constructor() { }

}

tabs.page.html

<ion-tabs>

  <ion-tab-bar slot="bottom">

    <ion-tab-button tab="tab-one">
      <ion-icon name="home-outline"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="tab-two">
      <ion-icon name="person-circle-outline"></ion-icon>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

tab-one.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { TabOnePage } from './tab-one.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: TabOnePage
      }
    ])
  ],
  declarations: [TabOnePage]
})
export class TabOnePageModule {}

tab-one.page.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tab-one',
  templateUrl: 'tab-one.page.html',
  styleUrls: ['tab-one.page.scss'],
})
export class TabOnePage {

  constructor() {}

}

【讨论】：