所以我想使用Angular开发一个吃豆人游戏,我想使用一个SVG,我想创建一个有嵌入式pacman.component的board.component.
board.component将有一个< svg>< / svg>和pacman.component将有一个< circle>< / circle>但是角度在我的pacman.component中引发了这个错误：
[Angular]’circle’不是已知元素：
- If ‘circle‘ is an Angular component,then verify that it is part of this module.
- To allow any element add ‘NO_ERRORS_SCHEMA‘ to the ‘@NgModule.schemas‘ of this component.
修复这些错误后,我最终得到了这个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>这使得圈子不起作用.
只是想知道Angular的做法是什么？我不希望在单个组件中包含我的整个svg代码(svg,circle,paths等).
谢谢.
编辑：
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>
解决方法
我相信回答你在这篇精彩文章中描述的问题：
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: ...
})
...
