Angular и SVG: как динамически загружать пользовательские компоненты?

Question

Мне нужно динамически загружать элементы SVG.

Элементы очень просты.Шаблон:

<svg:rect [attr.x]="x" [attr.y]="y" width="10" height="10" />

Класс:

export class DraggableSvgItemComponent implements OnInit {

  x: number = 0;
  y: number = 0;

  constructor() { }

  ngOnInit() {
  }

}

Вот так выглядит шаблон компонента контейнера:

<svg attr.height.px="{{height}}" attr.width.px="{{width}}">
    <svg:g app-draggable-svg-item *ngFor="let d of draggables" />
</svg>

И вот как я генерирую форму элементовкомпонент контейнера:

// commands <- load fun stuff with x and y coordinates
var toSet = new Array<DraggableSvgItemComponent>();
commands.forEach((value) => {
  if (value instanceof ZPL2.GraphicShapeBase) {
    var toAdd = new DraggableSvgItemComponent();
    toAdd.x = value.x;
    toAdd.y = value.y;

    console.log(toAdd);
    toSet.push(toAdd);
  }
});

this.draggables = toSet;

Журнал консоли показывает, что x и y имеют ненулевые значения: DraggableSvgItemComponent {x: 100, y: 50}, но выводом является svg с квадратом в верхнем левом углу и значениями x иy равны 0.

Если я помещаю <rect> непосредственно в холст, не используя другой компонент, он работает, но он мне нужен, потому что мне приходится иметь дело с разными вещами SVG.

Что такоеЯ делаю неправильно с привязками значений?

Answer 1

Вам не нужно создавать компоненты DraggableSvgItemComponent в коде.Они будут созданы как дочерние элементы элементов <svg:g>, если вы определите селектор компонента как селектор атрибута.Свойства x и y можно пометить с помощью Декоратор ввода , чтобы разрешить привязку данных.

@Component({
  selector: '[draggable-svg-item]',
  template: `<svg:rect [attr.x]="x" [attr.y]="y" width="10" height="10" />`
})
export class DraggableSvgItemComponent {
  @Input() x: number = 0;
  @Input() y: number = 0;
}

В родительском компоненте draggables может быть просто массивомпозиции:

export class AppComponent {
  width = 200;
  height = 200;
  draggables = [
    { x: 5, y: 0 },
    { x: 20, y: 30 },
    { x: 0, y: 20 },
    { x: 24, y: 8 },
  ];
}

, которые предоставляются дочерним компонентам со связыванием свойства:

<svg [attr.height.px]="height" [attr.width.px]="width">
    <svg:g draggable-svg-item [x]="d.x" [y]="d.y" *ngFor="let d of draggables" />
</svg>

См. этот стек для демонстрации.