Question

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

我一直在互联网上寻找除订阅Observable以外的解决方案，但找不到任何解决方案。最重要的是，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变量

任何帮助将不胜感激

Answer 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

Ionic 4在标签之间共享数据

1 个答案: