加载特定组件的最佳方式，知道其选择器是变量答案

【问题标题】：Best way to load a specific component knowing its selector as variable加载特定组件的最佳方式，知道其选择器是变量
【发布时间】：2021-11-29 11:32:18
【问题描述】：

我正在使用 Angular 构建一个简单的游戏。

一个游戏可以有多个回合。每一轮都可以与其他轮不同，我使用变量roundType 来区分它们。例如，一轮可以有roundType 等于：

NORMAL => "阅读问题并选择您认为正确的答案"
SONG => "听这首歌，选择你认为正确的答案"
IMAGE => "看图片，选择你认为正确的答案"

每一轮都有多个问题/歌曲/图片。

由于每种圆形类型都有不同的行为，我使用这些选择器创建了 3 个不同的组件：

圆形法线
圆曲
圆形图像

这样，我可以在 parent.component.html 上加载组件，如下所示：

<div>
  <round-normal *ngIf="roundType == 'NORMAL'"></round-normal>
  <round-song *ngIf="roundType == 'SONG'"></round-song>
  <round-image *ngIf="roundType == 'IMAGE'"></round-image>
</div>

由于我计划在不久的将来添加更多的圆形类型，我不能有 20 行这样的行，而且我确定这不是正确的方法，它只是感觉错误和糟糕的编码。

我阅读了 Angular 文档，但没有找到足够接近的用例来选择解决方案。这就是为什么我在这里向您请教关于什么是最好的方法的建议。

谢谢。

【问题讨论】：

看dynamic component loading in angular docs
考虑路由。
所以，@LukaszGawrys，你是对的。刚刚测试，它的工作原理。现在，我应该让你写一个答案，还是你想让我回答我自己并结束这个问题？

标签： angular typescript angular-components

【解决方案1】：

您可以使用路由来渲染每个组件，例如对每个组件使用 /normal 和 /song 和 /image，如果您想存储它们的分数，您可能需要一个服务，这就是为什么您需要它们在同一个组件中.

【讨论】：