組件模板表達式不更新

在我的主視圖中，我注入了一個組件，在初始加載時顯示了正確的整數，但如果稍後在我的主視圖中更新該值，附加到該函數的控制檯日誌消息將顯示正確的整數，但實際的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

謝謝！

來源

2016-01-27 wiggle

將子組件（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'; 
}

希望它可以幫助你，蒂埃裏

來源

2016-01-27 11:25:36

組件模板表達式不更新

回答

相關問題