订阅 IONIC2 提供程序不与页面和自定义组件同步

Question

这是我的可订阅购物车提供商，其中.cart可订阅

@Injectable()
export class CartProvider {
cart: Observable<Array<CartItem>>
private _cart: BehaviorSubject<Array<CartItem>>;
private cartStore: Array<CartItem> = [];
constructor(private dialogs: DialogsProvider) {
this._cart = <BehaviorSubject<Array<CartItem>>>new BehaviorSubject([]);
this.cart = this._cart.asObservable();
}
/**
* return obs array cart
* 
* @returns {Observable<Array<CartItem>>} 
* @memberof CartProvider
*/
getCart(): Observable<Array<CartItem>> {
return this.cart;
}

当我尝试订阅 Ionic 页面上的更改时，它工作正常

export class ItemsPage 
@ViewChild(Content) content: Content;
items: Array<CartItem>;
cartDisplay:any;
constructor(public navCtrl: NavController, public navParams: NavParams , private cart:CartProvider
) {
cart.getCart().subscribe((val) => {
this.cartDisplay = val.length;
});
}

但是当我尝试使用相同的方法时cart.getCart()它无法监视CartProvider.cart上的更改，因此当相同的确切代码在 Ionic 页面上工作时，它无法更改自定义组件 html 上的值

<button ion-button clear icon-only (click)="showCart()">
<ion-icon name="cart"></ion-icon>
<span class="badge" *ngIf="cartDisplay > 0">{{cartDisplay}}</span>
</button>

Answer 1

更新：：

我通过将 CartProvider 添加到自定义组件提供程序数组中解决了这个问题

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CartComponent } from './cart';
import { CartProvider } from "../../providers/cart/cart";
@NgModule({
declarations: [ 
CartComponent,
],
imports: [
IonicPageModule.forChild(CartComponent),
],
exports: [
CartComponent
],
providers:[
CartProvider // <-------- added here instead of adding it to component.providers array
]
})
export class CartComponentModule {}