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

Question

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

在这里，当我每次点击一个脚本时，旧脚本的详细信息都会被新脚本（点击的脚本）详细信息所取代。我不希望我的旧脚本详细信息在我单击新脚本时消失

我是 angular 的新手。有人可以帮我解决这个问题吗？基本上我想为不同的输入多次加载相同的组件并显示所有 together.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组件

parent component.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>

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

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

How to call a same component multiple times with different input and display it in same page

components

multiple-instances

angular

angular6

parent.html

parent component.ts

Child.html

child component.html