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

Question

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

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

我很有棱角。有人可以帮我这个吗？基本上我想为不同的输入多次加载相同的组件并一起显示.Below只是我想要实现的代码示例..

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>     

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

父组件.ts

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

Child.html

<h1>Script A - Details </h1>

child 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详细信息。

我想同时显示两个细节。脚本A和正在加载（等待来自服务器的响应）如果我单击脚本B，它应该开始加载，并且两个脚本的详细信息应该随时可用。

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>

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