组件值更改后角度视图未更新答案

【问题标题】：angular view is not updating after component value gets changed组件值更改后角度视图未更新
【发布时间】：2017-08-14 02:47:44
【问题描述】：

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

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

我有两种情况：

场景 1：假设购物车包含两个产品，当页面加载时，所有三个视图都会根据它们各自的组件数据加载。在这种情况下，购物车计数按预期显示为 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();
  }
}

【问题讨论】：

由于您在一个视图中拥有这三个组件，此链接将解决问题。通过服务在组件之间进行交互。 angular.io/docs/ts/latest/cookbook/…让我知道你是否设法解决了这个问题。

标签： angular view

【解决方案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));
    }
}

然后您可以像这样在组件内部使用购物车

@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

可以在此处找到有关可观察数据服务模式的更多信息： http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/

【讨论】：