javascript - 插入一个变量作为组件模板的内联样式参数？

Question

这是组件模板:

<div style="max-width: 100rem;
            margin-top: 5rem;
            min-height: 20rem; 
            overflow: hidden;">
    <img style="width: 100%; 
                height: auto;  
                margin: -20% 0 -20% 0;" 
        [src]="src">
</div>

和组件类:

    import { Input, Component, OnInit } from '@angular/core';

    @Component({
      selector: 'image',
      templateUrl: './image.component.html',
      styleUrls: ['./image.component.scss']
    })
    export class ImageComponent implements OnInit {
      @Input() src;
      @Input() crop = "-20%"

      constructor() { }

      ngOnInit() {
      }
    }

我认为可以像这样将 crop 输入值添加到模板中:

    margin: {{crop}} 0 {{crop}} 0;" 

但是这不起作用。想法？

Answer 1

为了插入样式属性，您需要像这样使用 NgStyle 指令:

<img [ngStyle]="{'margin': margin}"/>

在组件中

get margin() { 
  return `${this.crop} 0 ${this.crop} 0`
}

您可以在这里查看官方文档:https://angular.io/api/common/NgStyle