Angular 2 – 如何在app.component中使用`svg`和将`circle`作为

发布时间：2020-12-17 17:47:08 所属栏目：安全来源：网络整理

导读：所以我想使用Angular开发一个吃豆人游戏,我想使用一个SVG,我想创建一个有嵌入式pacman.component的board.component. board.component将有一个 svg / svg和pacman.component将有一个 circle / circle但是角度在我的pacman.component中引发了这个错误： [Angul

所以我想使用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: ...
})
...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!