组件模板表达式未更新答案

【问题标题】：Component template expression not updating组件模板表达式未更新
【发布时间】：2016-01-27 10:56:04
【问题描述】：

在我的主视图中，我注入了一个组件，在初始加载时，它会显示正确的整数，但如果我稍后在主视图中更新该值，则附加到函数的控制台日志消息会显示正确的整数，但实际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;

        ...

price-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

谢谢！

【问题讨论】：

标签： angular angular2-template angular2-directives

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

希望对你有帮助蒂埃里

【讨论】：