Ioni c 4 / Angular Вкладка по умолчанию открыта атомарно - PullRequest
Новая
       47

Ioni c 4 / Angular Вкладка по умолчанию открыта атомарно

1 голос
/ 09 мая 2020

У меня есть страница с 2 вкладками. Когда я go перехожу на страницу, она начинается как пустая с отображением только двух кнопок вкладок. Как только я нажимаю любую из кнопок, отображается содержимое вкладок. Как мне сделать так, чтобы при переходе на эту страницу одна из вкладок была уже открыта по умолчанию? Вот 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>

1 Ответ

0 голосов
/ 09 мая 2020

Вы должны установить это в пути по умолчанию для модуля маршрутизации страниц вкладок. Вот вам полный пример:

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

}
...