Question

每当更新服务中的值时，我都会尝试从服务中获取值到制表符组件，如果可能，请将 cartNumber in cart.service.ts 绑定到 cartNumber in tabs.ts 即可。我的用例是：

Screenshot of my app

点击“添加到购物车”按钮，中间的“购物车”标签应将徽章编号更新为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似乎不起作用。或者我对任何这些方法的理解都是错误的。

Answer 1

感谢Suraj Rao建议使用Ionic 2 Events

我无法找到如上所述在不同组件之间进行通信的方法，这确实完成了这项工作。一个非常干净和优雅的解决方案，无需使用$ watch或通过注入运行$ scope，如角度1。

Answer 2

在tabs.ts内，您可以使用以下代码在CartService构造函数中注入TabsPage的实例：

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(cartService : CartService ) {//It will be automatically injected by the Ionic framework

  }

  //Somewhere in your code you can do this :
  this.cartService.addToCart(/*parameters*/);


}

为了完成这项工作，请确保{app}已在app.module.ts文件中列为提供商。

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

Screenshot of my app

2 个答案: