javascript - 使用 Angular 4 的 Ionic 3 中组件和提供者(用于全局变量)之间的两种方式数据绑定(bind)

Question

我有以下代码:

app.html:

<ion-menu [content]="content">
    <ion-content [ngStyle]="{'background': 'linear-gradient(#'+menuColor1+', #'+menuColor2+')'}">
        ...
    </ion-content>
</ion-menu>

<ion-nav #content [root]="rootPage" swipeBackEnabled="false"></ion-nav>

app.components.ts:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';
import { GlobalsProvider } from '../providers/globals/globals';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = TabsPage;

  menuColor1: string = GlobalsProvider.MENU_COLOR_1;
  menuColor2: string = GlobalsProvider.MENU_COLOR_2;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
        GlobalsProvider.MENU_COLOR_1 = "f00";
        GlobalsProvider.MENU_COLOR_2 = "ff0";

        console.log(GlobalsProvider.MENU_COLOR_1); // f00
        console.log(this.menuColor1); // 000 (expected: f00)

        console.log(GlobalsProvider.MENU_COLOR_2); // ff0
        console.log(this.menuColor2); // 000 (expected: ff0)
    });

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.

      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

globals.ts:

export const GlobalsProvider = {
    MENU_COLOR_1: "000",
    MENU_COLOR_2: "000",
}

我想在 app.component.ts 和 globals.ts 之间进行双向数据绑定(bind)，每次使用 vars MENU_COLOR_1 和 MENU_COLOR_2 已更改，也更新 menuColor1 和 menuColor2 值(我将更新 MENU_COLOR_1 和 MENU_COLOR_2 将来也会来自其他组件，我希望 menuColor1 和 menuColor2 接收这些更改)。

有可能吗？

Answer 1

对象是可变的并且通过引用传递。原始类型，如 string 不是，因此它们不会像您希望的那样改变。所以你应该做的是使用对象:

menuColor1 = GlobalsProvider;
menuColor2 = GlobalsProvider;

ngOnInit() {
  GlobalsProvider.MENU_COLOR_1 = "f00";
  GlobalsProvider.MENU_COLOR_2 = "ff0";

  console.log(GlobalsProvider.MENU_COLOR_1); // f00
  console.log(this.menuColor1.MENU_COLOR_1); 

  console.log(GlobalsProvider.MENU_COLOR_2); // ff0
  console.log(this.menuColor2.MENU_COLOR_2); 
}

但是要非常小心，因为如前所述，对象是通过引用传递的，所以有时您可能不希望这种行为。