Angular 为链接分配变量

Question

在我的应用程序中，当单击按钮时，我通过 link 显示图像。目前显示的是'Hello World'这句话。但是我想通过 link 显示我自己的数据 _stickerData?.stickerData。我怎样才能达到我想要的？

HTML;

    <button mat-button matRipple class="purple-500 fuse-white-fg mr-12" (click)="imageSource()">Display Image </button>
<img [src]="url" *ngIf="hidden" />

TS;

    public _stickerData: IStickerData = {};
    hidden = false;
    url = "http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/^xa^cfa,50^fo100,100^fdHello World^fs^xz";    

@Input()
    set StickerData(prm: IStickerData) {
        if (this._stickerData != prm) {
            this._stickerData = prm;
        }
    }
    get StickerData(): IStickerData {
        return this._stickerData;
    }

    imageSource(){
       
        this.hidden = !this.hidden;
    }

Answer 1

您可以更新 @Input setter 中的 url，方法是使用 ${} 运算符对其进行插值：

  public stickerData: IStickerData;
  hidden = false;
  url;

  @Input()
  set StickerData(prm: IStickerData) {
    if (this.stickerData !== prm) {
      this.stickerData = prm;
    }
    this.url = `http://api.labelary.com/v1/printers/8dpmm/labels/4x6/0/^xa^cfa,50^fo100,100^fd${this.stickerData?.stickerData}^fs^xz`;
  }
  get StickerData(): IStickerData {
    return this.stickerData;
  }

  imageSource(): void{
    this.hidden = !this.hidden;
  }

Angular 为链接分配变量

Angular Assigning Variables to Links

javascript

html

angular

typescript

zpl