Angular2在页面/组件之间共享变量或全局变量答案

【问题标题】：Angular2 Sharing variable or Global variable between pages/ComponentsAngular2在页面/组件之间共享变量或全局变量
【发布时间】：2018-02-13 03:28:46
【问题描述】：

我正在尝试在我的 MOBILE POC (Cordova2/Angular2) 中创建购物车功能。我创建了用于在组件之间共享数据的服务。我通过组件 A 添加项目并尝试从组件 B 读取。但我在组件 B 中没有看到这些项目。我应该在服务中添加什么？

import { Injectable  } from '@angular/core';    
@Injectable()    
export class CartService {
    private vijayCart: Array<any> = [];
    GetCart() {
        return this.vijayCart;
    }
    SetCart(item) {
        this.vijayCart.push(item);
    }
}

组件 A：

addItemToCart(item) {
    this.cartService.SetCart(item);
    //this.cartService.vijayCart.push(item);
    this.cartLenth = this.cartService.GetCart().length;
}

组件 B：

  ngOnInit(): void {
      this.cartSer = this.cartService.GetCart();
  }

【问题讨论】：

解决方案之一是在您的服务中创建一个 BehaviorSubject 并对其进行观察，然后在两个组件中订阅它。或者使用 @Input / @Output 和 EventEmitter 来处理你的操作。
看看 BehaviorSubject - CLICK
你在使用 Ionic 吗？
这个问题问了很多次，谁能把它标记为重复
模块之间怎么共享，这种方式行不通。

标签： angular cordova

【解决方案1】：

一切都是正确的，您缺少的一件事是为两个组件提供服务。您需要在模块级别共享服务才能说我的服务在这两个组件之间共享。

 providers: [AppService],

模块的全部代码

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [AppService],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果您想了解更多细节并想知道如何在两个模块之间共享数据，您可以查看share data between tow module

行为主题 行为主体是在组件之间共享数据的一种更好的方式，它会在一个服务中发生数据更改时处理未来的数据共享，它会通知另一个服务。

要查看详细信息，您可以看到这个sharing data between components

【讨论】：