Question

我使用4.4.4版本的Angular。在我的app.component.html我有这个代码

<button class="btn btn-primary" (click)="updatePosition()">Up</button>
    <svg id="svg">
        <image xlink:href="../assets/map.png" x="0" y="0" height="420px" width="420px"/>
    </svg>

我想在按下按钮时动态更新x和y值。我尝试了各种方法，没有结果。

例如我使用属性绑定[style.x.px]="variableX"来定义x位置但是尽管按下按钮并更新variableX值没有发生任何事情，所以看起来我仍然需要更新x位置。通常情况下，我会使用简单的javascript定位该图像并在其上执行el.setAttribute('x', value)，但在角度上它不是那么简单，或者由于某种原因而无法正常工作。

有人可以帮忙吗？：）

Answer 1

如果你只想要一种方法来操纵图像的x和y css属性，我会使用：

NgStyle指令动态获取您想要的任何值：

<button class="btn btn-primary" (click)="updatePosition()">Up</button>
<image xlink:href="../assets/map.png" height="420px" width="420px [ngStyle]="style" />

position = { 'x': '0', 'y': '0' };
//you can also add any other css properties to this like width and height
get style() {
  return this.position;
}
updatePosition() {
  this.position = { 'x': '10px', 'y': '10px' }; //however you update the values
}

或者使用本地ElementRef和@ViewChild并直接在您的ts中操作nativeElement，如下所示：

<button class="btn btn-primary" (click)="updatePosition()">Up</button>
<image xlink:href="../assets/map.png" height="420px" width="420px" #image/>

@ViewChild('image') image: ElementRef;
updatePosition() {
  this.image.nativeElement.style.x = '10px'; //however you update the values
  this.image.nativeElement.style.y = '10px'; //however you update the values
}

确保从＆＃34; @ angular / core＆＃34;中导入ViewChild如果你这样做。

我还没有在plunkr或其他任何方面测试过这个，但我相信它们都应该有效。

Answer 2

为了绑定到SVG元素属性在角度2中，必须在它们前面添加attr。，e。 G：

这是一篇很棒的博客，解释了Angular 2中svg绑定的问题：https://500tech.com/blog/all/svg-in-angular-2/

如何更新Angular 4中的SVG元素属性？

2 个答案: