如何在angular2的@Component中使用样式的变量？如何在样式中使用名为leftposition的变量？

Question

我想在类@Component中使用名为class的leftposition和bottomposition的变量作为样式。我该怎么用？

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'pdf-RadioButton',
  templateUrl: './radio-button.component.html',
  styles:[`
    .pdf-radiobutton{
      position:absolute;
      bottom:{{leftposition}} //I want to use this leftposition named variable in the styles
    }
  `]

})
export class RadioButtonComponent implements OnInit {

  @Input() name:string;
  @Input() leftposition:string;   // value of this variable is coming from tag named <pdf-RadioButton as mentioned in the selector in the @Component
  @Input() bottomposition:string; //this variable contain bottom position for the component

  constructor() { }

  ngOnInit() {
  }
  radioChanged(message:string){
    console.log(message);
  }
}

Answer 1

像这样在您的HTML元素上使用ngStyle：

[ngStyle] =“ {'bottom'：leftposition}”