角2 - app.componentに `svg`を、子コンポーネントとして` circle`を持つにはどうすればいいですか？

Question

私は角度を使ってPac-manゲームを開発したいと思っていますが、SVGを使ってみたいと思います。board.componentを作成します。pacman.componentが埋め込まれています。

board.componentは<svg></svg>とpacman.component<circle></circle>を持っていますがありますが、角度はこのエラーがスローされます私のpacman.component：

[角度] 'サークル' ではない知られている要素：

1. が ' 円 'が角度成分である場合、それがこのモジュールの一部であることを確認します。
2. 任意の要素を許可するには、このコンポーネントの '@ NgModule.schemas'に 'NO_ERRORS_SCHEMA'を追加します。

は、これらのエラーを修正した後、私はこのSVGで終わる：

<svg _ngcontent-c0="" width="100" height="100"> 
    <app-pacman _ngcontent-c0="" _nghost-c1=""> 
     <circle _ngcontent-c1="" fill="yellow" r="25" cx="10" cy="10"></circle> 
    </app-pacman> 
    </svg> 

は今、唯一の問題は、今 <app-pacman></app-pacman>と pacman.componentが、それは circleが動作しない角度のラップを作ることです。

これを行う角度の仕組みは何でしょうか？私は全体のsvgコード(svg, circles, paths, etc...)を単一のコンポーネントに入れたいとは思わない。

ありがとうございました。

編集：

board.component.html：

<svg [attr.width]="width" [attr.height]="height"> 
    <app-pacman></app-pacman> 
</svg> 

pacman.component.html：

<circle [attr.cx]="cx" [attr.cy]="cy" r="25" fill="yellow"></circle> 

Answer 1

私はこののwonderfull資料に記載さあなたの質問に答えると信じ

：@Componentデコレータは、@から派生しているため要するにhttps://teropa.info/blog/2016/12/12/graphics-in-angular-2.html#avoiding-element-selectors-for-components

、あなたの代わりに要素の属性として、あなたの子コンポーネントを使用する必要があります（あなたはこれを行うことができます指令）。 あなたのケースに適用すると、それは次のようになります。

<svg [attr.width]="width" [attr.height]="height"> 
    <svg:g app-pacman /> 
</svg> 

pacman.component.tsで：

@Component({ 
    selector: '[app-pacman]', 
    templateUrl: ... 
}) 
... 

Answer 2

SVG名前空間は非常に厳しいです。私は、ブラウザーが未知の要素を含んでいれば、SVGを完全に拒否するだろうと思う。これは、生のマークアップが他のタイプのマークアップを注入するよりも比較的安全ですが（まだそれほど安全ではないため）、svgをDOMに直接注入する理由の1つです。私はsvgの角度を大きくして働いていますが、考えてみると、私はこれまでに部品を別の角度成分に分離しようとは考えていませんでした。通常のsvg要素に適用されるクラスセレクタや属性セレクタなど、さまざまなセレクタをコンポーネントに使用できます。それはうまくいくかもしれない。

私は指示がうまく動作することを知っています。ほぼすべてのmyと要素には関連するディレクティブがあります。私はディレクティブで必要なものを達成しようとします。ホストのインスタンスデータ/プロパティをコンポーネントごとに保持することができますが、ビューはすべて1つの親コンポーネントにカプセル化されます。依存関係注入を使用して、ホスト/親コンポーネントをすべての子ディレクティブインスタンスに挿入するか、@ViewChildrenを使用してすべての子ディレクティブインスタンスをクエリし、それらをコンポーネントから操作することができます。

あなたが一緒に任意にグループ要素が必要な場合は、SVG族元素

<g> ... </g> 

か、の角度「目に見えない」コンテナを使用することができますを使用することができ、

<ng-container>...</ng-container> 

もしあなたがする必要があるすべていくつかのリストを繰り返し、ngIfステートメントなどを適用します。

Answer 3

私はこのようなことをしたいと思うでしょう：

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

@Component({ 
    selector: 'svg-component', 
    template: ` 
     <svg> 
      <ng-content></ng-content> 
     </svg> 
    ` 
}) 
export class SvgComponent {} 

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

@Component({ 
    selector: 'circle-component', 
    template: ` 
     <ng-container> 
      <circle></circle> 
     </ng-container> 
    ` 
}) 
export class CircleComponent {}