Angular2でSVGコンポーネントを動的に作成する方法は？

Question

私はSVGを使用するWebアプリケーションを作成しています。 SVG要素で構成されたコンポーネントを作成し、ルートsvg要素に入れます。 SVG/XML文書ツリーは厳格なので、要素セレクタは使用できません。 そして、彼らはテンプレートを持っているがsvg:gタグで始まります。アプリケーションで

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

、私は、コンポーネントのユーザー押しボタンを作成 と同時に、それをドラッグを開始します。 onMouseDown()が呼び出されたときに

@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`. 
     }) 
    } 

コンポーネントが作成されますが、それはSVG文書では違法要素であると表示することはできませんので、そのDOM要素は、divです： は、私はそれを動的ComponentResolverを使用してコンポーネントを作成することによって達成することができると思いました。

私はその後g要素が作成され、selector='svg:g[foo]'で試してみましたが、その名前空間は、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を使用しています。

Answer 1

コンポーネントリゾルバでビューにコンポーネントを作成しようとする代わりに、これを代わりに行います。

• SVGコンポーネントに渡す属性と一致するプロパティを持つオブジェクトを作成します。
• このオブジェクトを配列（ex.svgItems）に追加します。
• * ngFor = "svgItems内のsvgItem"を、動的に作成するSVGコンポーネントに追加します。

希望して問題を解決してください。

Answer 2

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が解決されるまで、代替の多くはありません。