मेरे पास एक मूल घटक और बाल घटक है जहां मैं इसे मूल घटक में प्रस्तुत करने के लिए बाल घटक के चयनकर्ता का उपयोग कर रहा हूं।

मेरा बच्चा घटक एचटीएमएल:

<div class="main-container" [ngStyle]="{'transform': 'scaleX(widthScale) scaleY(heightScale)'}">
    <img src="../../assets/svg/kiln-main.jpg" class="kiln-image">
    <svg id="area2"></svg>
    <svg id="area"></svg>
</div>

बाल घटक टीएस:

@Input() widthScale:string;
@Input() heightScale:string;

मैं माता-पिता के मूल्यों के आधार पर बच्चे को "ट्रांसफॉर्म: स्केलेक्स () स्केली ()" लागू करना चाहता हूं।

मेरे माता - पिता:

<app-child [widthScale]="0.5" [heightScale]="0.5"></app-child>

उपरोक्त कोड किसी भी तरह काम नहीं कर रहा है। यहां सीएसएस संपत्ति "ट्रांसफॉर्म" के मूल्यों को कैसे लागू करें?

0
Yaditya 7 अक्टूबर 2021, 09:43

1 उत्तर

सबसे बढ़िया उत्तर

आप बच्चे में इस प्रकार एक विधि बना सकते हैं:

  getTransformStyle() {
    let styles = {
      transform: `scaleX(${this.widthScale}) scaleY(${this.heightScale})`,
    };
    return styles;
  }

इसे चाइल्ड html में इस प्रकार उपयोग करें:

<div class="main-container" [ngStyle]="getTransformStyle()">
  <img src="../../assets/svg/kiln-main.jpg" class="kiln-image" />
  <svg id="area2"></svg>
  <svg id="area"></svg>
</div>

आप बच्चे को इस प्रकार संदर्भित कर सकते हैं:

<app-child [widthScale]="'0.5'" [heightScale]="'0.5'"></app-child>

काम करने का उदाहरण: https://stackblitz.com/edit/angular-ivy-gaohfo

1
deepakchethan 7 अक्टूबर 2021, 09:56