Angular 如何使用不同的输入多次调用同一组件并在同一页面中显示

我有一个带有少量脚本的父组件。我有一个子组件，它将显示有关脚本的详细信息。每次我都将脚本名作为输入传递给我的子组件。我从服务器获取详细信息，并将其显示在child.html页面中

在这里，当我每次单击脚本时，旧的脚本详细信息将替换为新的脚本（单击的脚本）详细信息。我不希望在单击新脚本时，旧脚本的详细信息消失

我是新手。有人能帮我吗。基本上，我想为不同的输入多次加载相同的组件，并一起显示。下面是我试图实现的代码示例

parent.html Child.html 在这里，如果我先单击脚本A，它将显示脚本A的详细信息，然后如果我单击脚本B，脚本A的详细信息将替换为脚本B的详细信息

---

我想同时展示这两个细节。。脚本A，当它正在加载（等待服务器的响应）时，如果我单击脚本B，它应该开始加载，并且只要有可用的脚本详细信息都应该出现。

您应该使用

ngFor

来迭代单击的脚本数组并显示子组件

例如，在父组件中创建一个数组来存储单击的脚本

clickedScripts = [
    {id: 1, name: 'script A'},
    {id: 2, name: 'script B'},
    {id: 3, name: 'script C'},
]

继续将任何新单击的脚本对象推送到该数组中。 然后在模板中使用子组件来显示它们

<div>
    <child-component *ngFor="let script of clickedScripts" [scriptName]="script.name">
</div>

---

另外，请查看角度文档中的

trackBy

函数。它将有助于提高性能，并且不会在每次将新元素推入数组时刷新整个渲染模板。

您应该使用

ngFor

在单击的脚本数组上迭代并显示子组件

例如，在父组件中创建一个数组来存储单击的脚本

clickedScripts = [
    {id: 1, name: 'script A'},
    {id: 2, name: 'script B'},
    {id: 3, name: 'script C'},
]

继续将任何新单击的脚本对象推送到该数组中。 然后在模板中使用子组件来显示它们

<div>
    <child-component *ngFor="let script of clickedScripts" [scriptName]="script.name">
</div>

---

另外，请查看角度文档中的

trackBy

函数。它将有助于提高性能，并且不会在每次将新元素推入数组时刷新整个渲染模板。

提供最少的代码来正确理解您的需求，从而帮助我们解决您的问题。@ganesh045:添加了我正在尝试做的基本代码示例。。非常感谢您的帮助。谢谢。请提供最基本的代码来正确理解您的需求，这样有助于我们解决您的问题。@ganesh045:添加了我正在尝试做的基本代码示例。。非常感谢您的帮助。谢谢..添加了一个代码示例，说明我正在尝试做的事情。。请看一看并提出建议。谢谢..已经实现了一个工作示例@。注意：避免从子组件进行服务调用。看一看演示文稿与容器组件关于Angular、React、Vue等UI开发的概念。添加了一个代码示例，说明我正在尝试做的事情。。请看一看并提出建议。谢谢..已经实现了一个工作示例@。注意：避免从子组件进行服务调用。看看演示与容器组件的概念，关于使用Angular、React、Vue等进行UI开发。

clickedScripts = [
    {id: 1, name: 'script A'},
    {id: 2, name: 'script B'},
    {id: 3, name: 'script C'},
]

<div>
    <child-component *ngFor="let script of clickedScripts" [scriptName]="script.name">
</div>