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

Question

我有一个包含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>

Answer 1

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

选项卡路由模块.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 {}

选项卡模块.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 {}

标签页.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>

选项卡一模块.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 {}

选项卡一.页.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() {}
}

Answer 2

我已经在您选择的选项卡的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>