Интерполировать переменную как встроенный параметр стиля шаблона компонента?

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 будет идеальным вариантом, но если вам нужно придерживаться своей модели исполнения, вы можете попробовать использовать CSS-переменные для установки поля.

Найдите демонстрацию Stackblitz , где цвет изменяется аналогичным образом.

hello.component.ts

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

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { 
    font-family: Lato;
    color: var(--hello-color); 
  }`]
})
export class HelloComponent implements OnInit {
  @Input() color: string; 

  constructor(public element: ElementRef) {

  }

  ngOnInit() {
    this.element.nativeElement.querySelector('h1').style.setProperty('--hello-color', this.color);​
  }
}

.css

/* Add application styles & imports to this file! */
:root{
  --hello-color: red;
}

app.component.html

<hello color="{{ color }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

Answer 2

Чтобы интерполировать свойства стиля, вам нужно использовать директиву NgStyle, например:

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

и в компоненте

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

Официальные документы можно посмотреть здесь: https://angular.io/api/common/NgStyle