Блог

Не удается установить позицию (x, y) для foreignObject в angular

я пробовал так:

 <foreignObject width="65" height="50" x="{{position?.x}}" y="{{position?.y}}">
   <div class="container">works!</div>
</foreignObject>
 

и

 <foreignObject width="65" height="50" [x]="position?.x" [y]="position?.y">
   <div class="container">works!</div>
</foreignObject>
 

но с привязками выдает ошибку:

Невозможно установить свойство x для [объекта SVGForeignObjectElement], который имеет только получатель

и это работает, если я устанавливаю позицию следующим образом:

 <foreignObject width="65" height="50" x="100" y="100">
    <div class="container">works!</div>
</foreignObject>
 

Как я могу установить динамическую позицию для foreignObject?

Я нашел решение

Необходимо добавить локальную ссылку на foreignObject

 <foreignObject width="65" height="50" #foreignFirst> <- here
   <div #container class="npz-container">works!</div>
</foreignObject>
 

Затем в ts-файл необходимо добавить ViewChild и атрибут:

 @ViewChild('foreignFirst') foreignFirst: ElementRef;

this.foreignFirst.nativeElement.setAttribute('x', this.position.x);
this.foreignFirst.nativeElement.setAttribute('y', this.position.y);
 

Я полагаю, ваш foreignObject имеет входные свойства x и y, которые вы можете установить;

 <foreignObject width="65" height="50" [x]="position.x" [y]="position.y">
   <div class="container">works!</div>
</foreignObject>
 

Вы можете создать объект x в качестве входного свойства в ForeignObject.Component.ts :

 private _position:any;  

@Input()
public get x(){ return position};
    
public set x(position:any){
    this._position=position;
}