使用变量时角云宽度不起作用

Question

我对使用角云有一个问题。如果我添加这样一个简单的图像：

<cl-image class="img-fluid" [public-id]="brand.image.publicId" dpr="auto" crop="scale">
    <cl-placeholder type="pixelate">
    </cl-placeholder>
    <cl-transformation quality="auto" fetch-format="auto" width="500">
    </cl-transformation>
</cl-image>

这个很好用。如果我尝试添加一个宽度：

<cl-image class="img-fluid" [public-id]="brand.image.publicId" dpr="auto" crop="scale">
    <cl-placeholder type="pixelate">
    </cl-placeholder>
    <cl-transformation width="150" crop="thumb">
    </cl-transformation>
    <cl-transformation quality="auto" fetch-format="auto" width="500">
    </cl-transformation>
</cl-image>

这也很管用。但我希望我的宽度是一个变量，而不是静态宽度。因此，我更新了代码如下：

<cl-image class="img-fluid" [public-id]="brand.image.publicId" dpr="auto" crop="scale" *ngIf="width">
    <cl-placeholder type="pixelate">
    </cl-placeholder>
    <cl-transformation [width]="width" crop="thumb">
    </cl-transformation>
    <cl-transformation quality="auto" fetch-format="auto" width="500">
    </cl-transformation>
</cl-image>

但这不管用。它显示图像，但没有调整大小，这是不好的。注意这一行：

<cl-transformation [width]="width" crop="thumb">

就像它被忽略了一样，我还确保在使用*ngIf="width"设置宽度之前不会创建组件。

有人知道为什么这不管用吗？

Answer 1

在您的app.component.ts上，您可以声明变量，例如：

public imageHeight = "500";
public imageQuality = "50";

然后在app.component.html中，在cl-transformation元素中，需要使用关键字attr.

<cl-transformation
  attr.height="{{imagesize}}"
  crop="scale"
  attr.quality="{{imagequality}}"
>

CodeSandBox演示

Answer 2

我对Cloudinary没有多少经验。也没有测试过它。查看云码，您可以尝试以下几个选项：

1. 在输入组件上使用cl-image。组件有它的定义。

export class CloudinaryImage
  implements AfterViewInit, OnInit, AfterViewInit, AfterContentChecked, OnChanges, OnDestroy {
  @Input('public-id') publicId: string;
  @Input('client-hints') clientHints?: boolean;
  @Input('loading') loading: string;
  @Input('width') width?: string;
  @Input('height') height?: string;

1. 如果这不是您想要的，那么查看cl-变换指令，您似乎只能传递本地属性。

export class CloudinaryTransformationDirective {

  constructor(private el: ElementRef) {
  }

  getAttributes(): NamedNodeMap {
    return this.el.nativeElement.attributes;
  }
}

这意味着，为了将动态值传递给指令元素属性，也许可以使用内插。

<cl-transformation width="{{ width }}" >

Answer 3

我对棱角不太熟悉，但你可以尝试以下方法，直到有更熟悉的人出现为止：

<cl-transformation width={{width}} crop="thumb">

传入硬编码的整数可以工作，因此只要定义了width并将其作为整数，它就可能工作。