Как создать компонент SVG динамически в Angular2?

Я создаю веб-приложение, которое использует SVG. Я создал компоненты, состоящие из элемента SVG, и они помещаются в корневой элемент svg. У них есть селектор атрибутов, потому что дерево документов SVG/XML является строгим, поэтому я не могу использовать селектор элементов. И у них есть шаблон начинается с svg:g тегом:Как создать компонент SVG динамически в Angular2?

@Component({ 
    selector:'[foo]', 
    template: '<svg:g>...</svg:g>', 
})

В приложении, я хочу, чтобы создать компонент, когда пользователь нажимает кнопку, и одновременно начать перетащив его. я думал, что это может быть достигнуто путем создания компоненты динамически с помощью ComponentResolver:

@ViewChild('dynamicContentPlaceHolder', {read: ViewContainerRef}) 
    protected dynamicComponentTarget: ViewContainerRef 

    private componentResolver: ComponentResolver 

    onMouseDown() { 
    this.componentResolver 
     .resolveComponent(FooComponent) 
     .then((factory) => { 
     const dynamicComponent = this.dynamicComponentTarget.createComponent(factory, 0) 
     const component: FooComponent = dynamicComponent.instance 
     const element = dynamicComponent.location.nativeElement 
     // add event listener to start dragging `element`. 
     }) 
    }

компонент создается, когда onMouseDown() называется, но его DOM элемент div, поэтому является незаконным элементом SVG документа и не может быть отображен.

Я попытался с selector='svg:g[foo]', создается тогда g элемент, но пространство имен не для SVG (http://www.w3.org/2000/svg), но нормальный HTML имен (http://www.w3.org/1999/xhtml) и его класс HTMLUnknownElement>g.

Я также пробовал с selector='svg:svg[foo]', тогда svg:svg элемент создан и отображается. Но svg:svg не может перемещаться с атрибутом transform, поэтому это не работает для моего приложения.

Как я могу создать динамический элемент svg:g для компонента селектора атрибутов?

Я использую Angular2: 2.0.0-rc4.

источник

2016-08-02 tyfkda

звучит как https: // github.com/угловой/угловой/выпуск/10404 –

Спасибо, @ GünterZöchbauer! Проблема такая же, как и то, что я хочу попробовать. Спасибо за информацию. Я жду исправления решения/ошибки. – tyfkda

Вместо того, чтобы пытаться создать компонент в представлении с помощью Component Resolver, я сделаю это вместо этого.

Создайте объект со свойствами, которые соответствуют атрибутам, которые вы хотите передать вашему компоненту SVG.
Добавить этот объект в массив (ex.svgItems).
Добавить * ngFor = "svgItem in svgItems" к компоненту SVG, который вы хотите создать динамически.

Надеюсь, что это ясно и решить вашу проблему.

источник

2017-01-31 16:21:35 Abrule

Вы правы насчет проблем с именами, сохраняя элемент g от рендеринга как svg. К сожалению, присоединение узла как элемента svg является единственным способом правильного правильного доступа компонента к пространству имен.

Однако это не означает, что это не сработает. Если вы добавите функцию перетаскивания в качестве директивы для элемента g в шаблоне, она будет скомпилирована вместе с вашим компонентом, и вы можете компенсировать свою логику в этой директиве. Верхний уровень svg будет правильно распределен по именам, и шаблон наследует это соответственно.

import {Component, Input} from '@angular/core'; 

@Component({ 
    selector: 'svg:svg[customName]', // prevent this from hijacking other svg 
    template: '<svg:g dragDirective>...</svg:g>', // note the directive added here 
    style: [] 
}) 
export class GComponent { 

    constructor() { } 

}

Это не может быть идеальным, но пока https://github.com/angular/angular/issues/10404 не будет решена, то не так много альтернативы.

источник

2017-03-29 22:09:45

Как создать компонент SVG динамически в Angular2?

ответ

Смежные вопросы