Question

您好我有三个视图的购物车。顶部标题视图，中间产品视图，底部页脚视图。每个视图都有自己的组件。

在标题视图中，我旁边有购物车图标，我想显示购物车产品数量。

我有两种情况：

Scenaio1：假设购物车包含两个产品，当页面加载所有三个视图时，根据其各个组件数据加载。在这种情况下，购物车计数显示为预期的2。

场景2：不，我点击中间视图中可用产品之一的“添加到购物车”选项。正确添加到数据中的产品我需要更新标题视图中的购物车数量，所以我从中间视图调用标题组件中的一个功能，并在实际的购物车计数变量中添加一个标题组件。当我把日志购物车计数正确打印但标题视图没有得到更新。有人可以帮助我如何获得更新的价值。

源代码：

标题组件：

...............
........
noOfItems:any = 2;
update updateCartCount(){
  this.noOfItems = this.noOfItems + 1;
}
........
............

标题视图（HTML文件）：

<li class=""><a routerLink="/my-cart" alt="Wishlist"
                                            title="Wishlist"><i class="fa fa-shopping-cart"></i>**{{noOfItems}}**</a></li>

中间组件

import {headerComponent} from './../../HeaderFooter/components/header.component';


export class DashboardRole implements AfterViewInit {

headerComp = new headerComponent();

  addProductToCart(){
      .....logic to save product details to database....
      this.headerComp.updateCartCount();
  }
}

Answer 1

这似乎非常适合可观察的数据服务

interface Item {
    id: number;
    name:string;
    price:number;
}

@Injectable()
export class Cart {
    private _items: BehaviorSubject<List<Item>> = new BehaviorSubject(List());

    public items: Observable<Item[]> = this._items.asObservable();

    addItem(newItem:Item):Observable{
         this._items.next(this._items.getValue().push(newItem));
    }
}

然后你就可以像在这个

中一样在组件内使用Cart

@Component({
    selector: 'app-cart-counter',
    template: `
        <div>Count: {{items.length}}</div>
    `
})
export class CartCounterComponent implements OnInit {
    items: Item[];

    constructor(
        private cart: Cart
    ) {}

    ngOnInit(){
        this.cart.items.subscribe(items => this.items = items;)
    }
}

或者像这样直接在模板中使用observable

@Component({
    selector: 'app-cart-counter',
    template: `
        <div>Count: {{(cart.items | async).length}}</div>
    `
})
export class CartCounterComponent{
    constructor(
        private cart: Cart
    ) {}
}

有关组件交互的更多信息，请参阅此处的文档： https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

此处可以在Observable Data Service模式中找到更多内容： http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/

组件值更改后，角度视图不会更新

标题组件：

标题视图（HTML文件）：

中间组件

1 个答案: