组件模板表达式未更新

Question

在我的主视图中，我注入了一个组件，在初始加载时它显示了正确的整数，但是如果我稍后在我的主视图中更新该值，附加到该函数的控制台日志消息显示正确的整数但是实际 html 值不会更新。这是怎么回事？

main.js:

@Component({
    selector: 'step-one',
    directives: [priceBox],
    templateUrl: 'step-one/step-one.html'
})

export class stepOne {

    constructor(@Inject(Router) router, @Inject(Http) http, @Inject(RouteParams) params, @Inject(priceBox) pbox) {
        let cid = parseInt(params.get('country'));

        pbox.price = 200;

        ...

价格-box.js

import {Component} from 'angular2/core';

@Component({
    selector: 'price-box',
    template: `
        <div>
            <h1>PRICEBOX</h1>
            <p>{{totalPrice}}</p>
        </div>
        `
})

export class priceBox {
    constructor() {
        this.totalPrice = '130';
    }

    set price(val){
        this.totalPrice = val;
        console.log('SET price box: price = ' + this.totalPrice);
    }
}

所以重申一下：在页面加载时，我的价格框元素显示价格为 130...当我尝试通过 pbox.price = 200 设置新值时，该值保持在 130 但我得到控制台日志消息说 SET price box: price = 200

谢谢！

Answer 1

将子组件 (priceBox) 注入父组件的方式有点奇怪。

如果你想在父组件中引用一个组件，你应该利用 ViewChild 装饰器：

@Component({
  selector: 'someDir',
  templateUrl: 'someTemplate',
  directives: [ItemDirective]
})
class stepOne {
  @ViewChild(ItemDirective) viewChild:priceBox;
  ngAfterViewInit() {
    // viewChild is set
  }

}

我还可以使用插值法为您的 priceBox 组件提供价格。后者定义了一个输入参数：

@Component({
  selector: 'price-box',
  template: `
      <div>
          <h1>PRICEBOX</h1>
          <p>{{totalPrice}}</p>
      </div>
      `
})
export class priceBox {
  @Input('val') totalPrice = '130';
}

您可以在您的父组件中使用它：

@Component({
  selector: 'price-box',
  template: `
    <price-box [val]="price"></price-box>
  `
})
export class stepOne {
  price = '200';
}

您会注意到您还可以利用自定义组件的两种方式绑定。您只需要添加相应的事件：

@Component({
  selector: 'price-box',
  template: `
      <div>
          <h1>PRICEBOX</h1>
          <p>{{totalPrice}}</p>
      </div>
      `
})
export class priceBox {
  @Input('val') totalPrice = '130';
  @Output('valChanged') totalPriceChanged:EventEmitter;

  constructor() {
    this.totalPriceChanged:EventEmitter = new EventEmitter();
  }

  updateTotalPrice() {
    this.totalPriceChanged.emit(this.totalPrice);
  }
}

现在在父组件中：

@Component({
  selector: 'price-box',
  template: `
    <price-box [(val)]="price"></price-box>
  `
})
export class stepOne {
  price = '200';
}

希望对你有帮助，蒂埃里

组件模板表达式未更新

Component template expression not updating

angular

angular2-template

angular2-directives