Angular 可观察组件之间的角度2通信

我在用可观察的东西进行测试。我有一个component catalog-item.ts，当我单击“购买”时，我希望component basket-status.component.ts使用我从catalog-item.ts发送的项目进行更新。这种情况是，当我发送物品时，它到达了服务，但没有到达篮子组件，我不知道我做错了什么。有什么想法吗

BasketWrapperService.ts

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

@Injectable()
export class BasketWrapperService {
    private addItemToBasketSource = new Subject<string>();
    addItemToBasket$ = this.addItemToBasketSource.asObservable();
    addItemToBasket(item: any) {
        this.addItemToBasketSource.next(item);
    }
}

---

问题是您在每个组件中使用

BasketWrapperService

作为提供者。因此，您正在创建多个

BasketWrapperService

对象。。如果在

模块装饰器中提供服务，则不创建每个提供程序的多个对象角度提供程序DI

@NgModule({
    BasketStatusComponent,
    CatalogItemComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [
    BasketWrapperService   //Provide Your service here
  ],
  bootstrap: [AppComponent],
})

现在您的
basketstatus.component.ts
我已删除
BasketWrapperService

import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { BasketWrapperService } from '../services/BasketWrapperService';

@Component({
    selector: 'app-basket-status',
    template: '{{items | json}}',
})
...
...

从catalog-item.component.ts中删除
BaseketWrapperService

import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { BasketWrapperService } from '../BasketWrapperService';

@Component({
    selector: 'app-basket-status',
    templateUrl: './basket-status.component.html',
    styleUrls: ['./basket-status.component.css'],
    providers: [BasketWrapperService]
})
export class BasketStatusComponent implements OnInit {
    subscription: Subscription;
    constructor(private basketEvents: BasketWrapperService) {
    }

    ngOnInit() {
        this.subscription = this.basketEvents.addItemToBasket$.subscribe(
            item => {
                console.log(item);
            });
    }
}

import { Component, OnInit } from '@angular/core';
import { BasketWrapperService } from '../services/BasketWrapperService';

@Component({
    selector: 'app-catalog-item',
    template: '<button (click)="comprar()">Comprar producto</button>',
})
...
...

从'@angular/core'导入{Component，OnInit}；
从“../services/BasketWrapperService”导入{BasketWrapperService}；
@组成部分({
选择器：“应用程序目录项”，
模板：“Compar producto”，
})
...
...

通过这样做，您的Angular应用程序只使用了
BasketWrapperService
的一个对象
如果希望共享服务实例，为什么要使用组件级提供者？参见，例如，仅对主题进行转述。主题可以用同样的方式订阅。@rjustin这对两个单独的实例没有帮助。此外，公开可观察对象意味着它是外部只读的，这有助于封装。@jornsharpe关于提供程序的说法是正确的。可能会有一些混淆，但除非您想要实例化服务（这是一种反模式），否则提供者应该在模块级别，而不是在组件中。将它们放在组件级别会破坏使用服务进行组件间通信的目的。但问题仍然是，如何理解这个主题？任何一个例子都请你这么多，很好的解释，双H。它的作品！
import { Component, OnInit } from '@angular/core';
import { BasketWrapperService } from '../services/BasketWrapperService';

@Component({
    selector: 'app-catalog-item',
    template: '<button (click)="comprar()">Comprar producto</button>',
})
...
...