聚合物 - 如何覆盖计算的属性？

  • Z时代
  • 2024-01-10
  • 分类：问答

如何覆盖计算的属性？聚合物 - 如何覆盖计算的属性？

这里有一个片段，其中的父类A计算result属性等于value财产，而它的子类B将重新计算result属性等于value + value2。

但覆盖不工作...

class A extends Polymer.Element {   
    static get properties(){  
     return {  
     value : Number,  
     result : {  
      type : Number,  
      computed : "computeProperty(value)"  
     }  
     }  
    }  
    computeProperty(value){  
     return value;  
    }  
    }  
    class B extends A {  
    static get is() { return "b-element"; }  
    static get template(){  
     return `  
     <div>Value : [[value]]</div>  
     <div>Value2 : [[value2]]</div>  
     <div>Result : [[result]]</div>  
     `  
    }  
    static get properties(){  
     return {  
     value2 : Number,  
     result : {  
      type : Number,  
      computed : "recomputeProperty(value, value2)"  
     }  
     }  
    }  
    recomputeProperty(value, value2){  
     return value + value2;  
    }  
    }  
    // Register the new element with the browser  
    customElements.define(B.is, B);

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>  
<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">  
    <b-element value="1" value2="2">  
    </b-element>

回答：

我不认为这是可能的，但你可以做的是利用观察员：

static get properties() { 
     return { 
     // ... 
     result : { 
      type : Number, 
      // making the result read-only because it's computed 
      readOnly : true, 
     } 
     } 
    } 
    static get observers() { 
     return ['onValueChanged(value, value2)'] 
    } 
    onValueChanged(value, value2) { 
     this.setProperties({ 
     result : value + value2 
     }, true); 
    }

以上是 聚合物 - 如何覆盖计算的属性？ 的全部内容， 来源链接： utcz.com/qa/258094.html

回到顶部