Svgにangular2コンポーネントを挿入

Question

最近私はweb devを開始しました。とくに角2である。 このフレームワークは素晴らしいと言わなければならない！

しかし、私は、私は最善の方法で解決する方法を見つけ出すカント1つの課題を持っている：

私はangular2（datamodels、共通サービスなど）と私のWebアプリケーションを構築したい

。 しかし、 "メインエリアスクリーン"テンプレートの場合、私はsvgで設計し、静的な線や円などをwysiwygで描画したいと考えています。 次に、これらの「メインエリアスクリーン」のページに、すべての異なる角度のコンポーネントを埋め込む必要があります。これは、私たちのレイアウトが典型的なグリッドスタイルではなく、さまざまなコンポーネントを静的な背景の上に「ピクセル精度」に配置する必要があるためです。

私はWebをさまざまな方法で検索しましたが、何も私の挑戦を解決するものではありません。

svgの中にangular2コンポーネントを埋め込み、角度テンプレートにsvgを追加することはできますか？

Answer 1

あなたはSVGグループの属性セレクタを使用している場合、それは動作しますが、私はあなたがwork.SVGに探しているカスタム要素の構文はシャドウDOM

を持っていないなどの部品を得るように見えることはできませんたとえば、これはうまく動作します：あなたはこれを試すことができ

：

@Component({ 
    selector: 'g[inner-svg]' 
}) 

@View({ 
    template: ` 
    <text x="10" y="20">{{ text }}</text> 
    ` 
}) 

export class InnerSvg { 
    @Input() text: string; 
} 

<svg> 
<g inner-svg text="This works"></g> 
</svg> 

Answer 2

はい、角2つのコンポーネントとしてSVGを追加することが可能です。

<svg:circle 
      [attr.cx]="circle?.x" 
      [attr.cy]="circle?.y" 
      [attr.r]="radius" 

      [attr.fill]="circle?.fill" 
      /> 

とルートのhtmlが

<svg> 
<g circle *ngFor="let circle of circles" 
        [attr.fill-opacity]="opacity" 
        [attr.transform]="scale" 
        [circle]="circle" 
        /> 
</svg> 

同様に使用できるようになります：あなたのサークルコンポーネント

@Component({ 
    selector: 'g[circle]', 
    templateUrl: './circle.component.html', 
    styleUrls: ['./circle.component.scss'] 
}) 

circle.component.hmtlを定義

全ての 上記のようにセレクタを使って同様のコンポーネントを作成することによって、他のsvgシェイプを作成できます。