The style of component A cannot be dynamically modified in the text component. How can I solve this problem?

Symptom:

When you place component A in the text component, the text color in style is bound. If you change the value of the bound textcolor, the text color of component A cannot be changed. For example, if you wish to change the text color from blue to red. Sample code:

Code in the template:

<text>
            <a href="https://huawei.com" style="color: {{textcolor}};" value="click here"></a>
        </text>
         <input type="button" value="Change the text color of component a." onclick="changeColor" />

Code in the script:

changeColor: function() {
          this.textcolor="red";
        }

Analysis:

When component A is placed in the text component, the quick app framework does not support dynamic style changes.

Solution:

You can bind the dynamic style to the outer text component to achieve the color change effect. The sample code is as follows (see the red part):

<text style="color: {{textcolor}};">
      <a href="https://huawei.com" value="click here"></a>
</text>

Effect (after tapping the button):

For more details, check:

Quick app documentation:

Document