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之间进行双向数据绑定，每次更改变量MENU_COLOR_1和MENU_COLOR_2时，都会在{{ 1}}和menuColor1值（我将来也会更新来自其他组件的menuColor2和MENU_COLOR_1，我希望MENU_COLOR_2和menuColor1接收这些更改）。

有可能吗？

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); 
}

但要非常小心，因为如上所述，对象是通过引用传递的，所以有时候你可能不会想要这种行为。

使用Angular 4在Ionic 3中组件和提供程序（用于全局变量）之间的双向数据绑定

1 个答案: