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

Answer 2

NgStyle将是理想的选择，但是如果您需要坚持执行模型，则可以尝试使用CSS变量设置边距。

找到Stackblitz demo，其中颜色以类似的方式更改。

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);
  }
}

style.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>

将变量插值作为组件模板的内联样式参数？

2 个答案: