javascript - Angular 2 将数据传递给另一个组件

Question

我是 Angular 2 的新手，仍在摸索中。我有两个组件:

1) 列表组件

这会列出商店中的所有产品并执行其他功能

@Component({
    selector :'home-list',
    providers :[CartService,CartStatus]

})

@View({
    templateUrl :'/app/views/list-product.partial.html'

})

export class HomeList{
    title: string;
    products : ProductInterface[];
    cart;
    private isFetching: boolean = false;

    constructor(
        private _router : Router,
        private _dataService: DataService,
        private _cartService: CartService,
        private _cartStatus: CartStatus
    ){}

    ngOnInit(){
        this.title = 'Featured Products';
        this.getfeaturedproducts();
    }
    getfeaturedproducts(){
        this._dataService.getFeatured().subscribe(
            products => {
                this.products = products;
                this.isFetching = true;
            }
        )
    }

    gotoDetail(slug:string) {
        console.log(slug);
        this._router.navigate(['ProductsDetail', {productslug:slug}]);
        return false;
    }

    getCart(){
        this._cartService.getCartContent().subscribe(
            res => {
                this.cart = res;
                console.log(res.result)
            }
        );
    }

    addtoCart(id:number){
            this._cartService.addToCart(id).subscribe(
                res => console.log(res)
               this._cartStatus.updateCart(id);
             //want to pass the data to CartStatus Component
            )


    }

}

2) CartUpdate 组件显示购物车中没有商品

@Component({
    selector : 'cart-status'
})

@View({
    template :'{{cart}}'
})

export class CartStatus{

    cart;

    updateCart(id:number){

        this.cart = id;
    }


}

问题是我无法将 id 或任何值传递给 CartStatus View 。当我 console.log updateCart 上的 id 时，它显示准确的值，但不会反射(reflect)在 CartStatus 的 View 上。

我在这里做错了什么吗？

Answer 1

从您的代码中，我可以看出 CartStatus 是一个组件，因此，

 providers :[CartService,CartStatus]

应该是，

providers  :  [CartService]
directives :  [cardStatus]

现在，检查这个官方文档以了解码件之间的通信，
https://angular.io/docs/ts/latest/cookbook/component-communication.html