Ionic 4 在选项卡之间共享数据答案

【问题标题】：Ionic 4 share data between tabsIonic 4 在选项卡之间共享数据
【发布时间】：2019-09-19 12:51:04
【问题描述】：

我正在努力在 Ionic 4 / Angular 8 应用程序的选项卡之间共享数据。

除了订阅 Observables 之外，我一直在互联网上寻找解决方案，但找不到任何解决方案。最重要的是，IonicFramework 文档对此没有任何说明。

以下是我的基本设置

booking-routing.module.ts

const routes: Routes = [
    {
        path: 'booking',
        component: BookingPage,
        children: [
            {
                path: 'detail',
                children: [
                    {
                        path: '',
                        loadChildren: () => import('./detail/detail.module').then((m) => m.DetailPageModule)
                    }
                ]
            },
            {
                path: 'tracking',
                children: [
                    {
                        path: '',
                        loadChildren: () => import('./tracking/tracking.module').then((m) => m.TrackingPageModule)
                    }
                ]
            },
            {
                path: 'pass',
                children: [
                    {
                        path: '',
                        loadChildren: () => import('./pass/pass.module').then((m) => m.PassPageModule)
                    }
                ]
            },
            {
                path: '',
                redirectTo: 'booking/detail',
                pathMatch: 'full'
            }
        ]
    },
    {
        path: '',
        redirectTo: 'booking/detail',
        pathMatch: 'full'
    }
];

booking.html

<ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="detail">
        <ion-label>Details</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="tracking">
        <ion-label>Tracking</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="pass">
        <ion-label>Pass</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>

booking.ts

booking: Booking;

constructor() {
    this.booking = someValue
}

我正在尝试与

共享 this.booking 变量

任何帮助将不胜感激

【问题讨论】：

angular.io/guide/router#route-parameters

标签： angular ionic-framework ionic4

【解决方案1】：

您可以在several ways 中进行操作，但我认为如果是选项卡，最简单的方法是通过共享服务。

您可以创建根范围服务：

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

@Injectable({ providedIn: 'root' })
export class SharedService {

    public variable1 = "Variable 1";
    public variable2 = "Variable 2";

}

然后按每个标签页导入并为其做依赖注入：

import { Component } from '@angular/core';
// import it first:
import { SharedService } from '../services/shared.service';

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

  localVariable: string;

  constructor(
    // inject as dependency:
    private sharedService: SharedService
  ) {
    this.localVariable = this.sharedService.variable1;
  }

}

现在您可以在模板代码中调用共享服务变量：

<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab Three
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  {{ localVariable }}
  {{ sharedService.variable2 }}
</ion-content>

或者只是通过 ts 文件通过共享服务访问所有 3 个选项卡中的值。

这里是堆栈闪电战： https://stackblitz.com/edit/ionic-v4-angular-tabs-vmloya

【讨论】：