Ionic 4Angular 有默认的选项卡原子打开

Question

我有一个有2个标签的页面，当我进入该页面时，开始是空白的，只有2个标签按钮。当我进入该页面时，开始时是空白的，只有2个标签按钮显示。一旦我点击其中一个按钮，标签页的内容就会显示出来。我怎样才能使它在我浏览到该页面时，其中一个标签页已经默认打开了？

<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>

Answer 1

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

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.模块.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() {}

}