如何通过绑定Angular 2服务的属性来更新Ionic 2 Tabs徽章？

每当服务中的值更新时，我都试图从服务的值获取到Tabs组件中，如果可能，请将cart.service.ts中的cartNumber绑定到tabs.ts中的cartNumber。我的用例是这样的：

我的应用程序的屏幕截图

通过点击“添加到购物车”按钮，中间的“购物车”标签应将徽章编号更新为购物车编号中的相应商品编号

cart.service.ts

@Injectable()
export class CartService {

  public cartNumber: number;

  constructor() {}

  getCartItems() {
    // returns list of items in shopping cart
  }

  addToCart(id, quantity){
    // updates the shopping cart with new items
  }

tabs.ts

import { CartService } from '../cart/cart.service';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page

  tab1Root: any = HomePage;
  tab2Root: any = CartPage;
  tab3Root: any = ProfilePage;

  public cartNumber: number;

  constructor() {
  }

}

因此，将cart.service cartNumber值“绑定”到我的选项卡组件的cartNumber上的最佳方法是什么，以便每当cart.service cartNumber发生更改时该值都会更新？

我已经尝试了ngOnChanges，但似乎无法正常工作。在这种情况下，EventEmitters似乎不起作用。或者，我对这些方法的任何理解都不对。