Angular 2 - 如何在app.component中使用`svg`和将`circle`作为子组件？

Question

所以我想用Angular开发一个吃豆人的游戏,我想用SVG来做这个,我想创建board.component一个嵌入式的pacman.component.

board.component将有一个<svg></svg>并且pacman.component将有一个<circle></circle>但有角度的抛出这个错误在我的pacman.component:

[Angular]'circle'不是已知元素:

1. 如果' circle '是Angular组件,则验证它是否是此模块的一部分.
2. 要允许任何元素将" NO_ERRORS_SCHEMA " 添加到此组件的" @NgModule.schemas ".

修复这些错误后,我最终得到了这个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>

现在唯一的问题是角度包裹pacman.component着<app-pacman></app-pacman>,这使得circle不起作用.

只是想知道Angular的做法是什么？我不希望将我的整个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

我相信回答你在这篇精彩文章中描述的问题:https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html#avoiding-element-selectors-for-components

简而言之,您需要将子组件用作属性而不是元素(您可以这样做,因为@Component装饰器派生自@Directive).适用于您的情况,它看起来像这样:

在board.component.html中:

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

在pacman.component.ts中:

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