Question

我正在测试可观察物。我有一个组件catalog-item.ts，当我点击buy时，我想要使用我从catalog-item.ts发送的项目更新组件basket-status.component.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);
    }
}

目录-item.componet.ts：

import { Component, OnInit } from '@angular/core';
import { BasketWrapperService } from '../BasketWrapperService';
import { catalogModel } from '../catalogModel';
@Component({
    selector: 'app-catalog-item',
    template: '<button (click)="comprar()">Comprar producto</button>',
    styleUrls: ['./catalog-item.component.css']
    , providers: [BasketWrapperService]
})
export class CatalogItemComponent implements OnInit {
    private producto: catalogModel;
    constructor(private basketService: BasketWrapperService) { }

    ngOnInit() { }

    comprar() {
        this.producto = new catalogModel();
        this.producto.concepto = "chaqueta";
        this.producto.id = 1;
        this.producto.precio = 80.50;
        this.addToCart(this.producto);
    }

    addToCart(item: catalogModel) {
        this.basketService.addItemToBasket(item);
    }
}

篮status.component.ts

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

Answer 1

问题是您在每个组件中使用BasketWrapperService作为提供程序。所以你要创建BasketWrapperService的多个对象..如果在Module Decorator

中提供服务，而不是创建每个提供者的多个对象Angular提供者DI

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

现在，您的basket-status.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 { BasketWrapperService } from '../services/BasketWrapperService';

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

通过这样做，Angular Aplication只使用了BasketWrapperService的1个对象

具有可观察性的组件之间的angular2通信

1 个答案: