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

Question

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

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

我是新手。有人可以帮我这个忙。基本上，我想为不同的输入多次加载相同的组件并一起显示。下面只是我要实现的代码示例。

parent.html

parent.html

<li> script1 <li>
<li> script2 <li>
<input type=button (onclick)=getDetails(script)>
<app-script-details 
    *ngIf="showChild"
    [job]="currentScript">
</app-Script-details>     

-使用单击的脚本作为输入来调用子组件

父component.ts

getDetails(script){
   this.showChild=true
   this.currentScript=script  // Clicked script
}

Child.html

<h1>Script A - Details </h1>

子component.html

 @Input() script

// Here I make a call to the server and get the details from server and display in child.html

在这里，如果我先单击脚本A，它将显示脚本A详细信息，然后如果我单击脚本B，则脚本A详细信息将替换为脚本B详细信息。

我想同时显示两个详细信息。如果我单击脚本B，则脚本A及其正在加载（正在等待服务器的响应）时，脚本A应该开始加载，并且两个脚本详细信息都应在可用时出现。

Answer 1

您应该使用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>

另外，请查看angular文档中的trackBy函数。它将有助于提高性能，并且不会在每次将新元素推入数组时刷新整个渲染的模板。