Question

我有一个带有＆＃34;配置器的应用程序＆＃34;人们可以从列表中选择产品，并根据他们的需求过滤该列表。在这个configurator组件中，我有一个click事件作为函数处理，请参阅下面的组件：

# configurator.component.ts

import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
import {Router, ROUTER_DIRECTIVES} from '@angular/router';
import {ProductService} from "./product.service";
import {Product} from "./product.model";
import {CurrencyPipe} from "@angular/common";
import {ShoppingcartService} from "../shoppingcart/shoppingcart.service";

@Component({
    moduleId: module.id,
    selector: 'configurator',
    templateUrl: './configurator.component.html',
    styleUrls: ['./configurator.component.css'],
    directives: [ROUTER_DIRECTIVES],
    providers: [ProductService, ShoppingcartService],
    pipes: [CurrencyPipe]
})
export class ConfiguratorComponent implements OnInit {

    public products:Product[];

    constructor(private productService:ProductService, private shoppingcartService:ShoppingcartService) {
    }

    ngOnInit() {
        this.getProducts();
    }

    getProducts() {
        this.productService.getProducts().then(products => this.products = products);
    }

    addProduct(product:Product) {
        this.shoppingcartService.add(product);
    }
}

从这里看起来一切正常，addProduct中的服务按预期调用。执行服务的触发器，每次单击都会增加shoppingcart产品阵列。该服务的处理方式如下：

# shoppingcart.service.ts

import {Injectable} from '@angular/core';
import {Product} from "../configurator/product.model";

@Injectable()
export class ShoppingcartService {

    products:Product[];

    constructor() {
        this.products = [];
    }

    get() {
        return this.products;
    }

    add(product:Product) {
        this.products.push(product);
    }

    remove() {
        console.log('Remove not implemented yet');
    }

    clear() {
        this.products = [];
    }
}

问题在于，对服务的add调用的更改并未反映应用程序本身。我在模板中定义了一个ngFor，但它似乎没有找到它：

# shoppingcart.component.html

<h2>Shoppingcart</h2>
<div class="row">
    <div class="col-md-12">
        <ul>
            <li *ngFor="let product of products">
                {{product.name}}
                <span class="pull-right">{{product.maf | currency:'EUR':true:'1.2'}}</span>
            </li>
        </ul>
    </div>
</div>

购物车组件本身：

# shoppingcart.component.ts

import {Component, OnInit, Input} from '@angular/core';
import {Router, ROUTER_DIRECTIVES} from '@angular/router';
import {Product} from "../configurator/product.model";
import {CurrencyPipe} from "@angular/common";
import {ShoppingcartService} from "./shoppingcart.service";

@Component({
    moduleId: module.id,
    selector: 'shoppingcart',
    templateUrl: './shoppingcart.component.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [ShoppingcartService],
    pipes: [CurrencyPipe]
})

export class ShoppingcartComponent implements OnInit {

    products:Product[];

    constructor(private shoppingCartService:ShoppingcartService) {
        this.products = [];
    }

    ngOnInit() {
        this.products = this.shoppingCartService.get();
    }
}

我希望它很小，因为似乎所有数据都存在，看起来只有绑定不顺利。

提前致谢

Answer 1

如果您在每个组件上提供ShoppingcartService，则每个组件都会获得它自己的实例。如果一个组件更新服务中的数据，则它在与服务不同的实例中，另一个组件会监听更改。

在公共父组件上仅提供ShoppingcartService 一次。如果您想与整个应用程序共享一个实例，那么这就是AppComponent。

双向数据绑定不使用多个组件和服务进行更新

1 个答案: