Как вызвать один и тот же компонент несколько раз с разным вводом и отобразить его на одной странице

Question

У меня есть родительский компонент с несколькими сценариями.У меня есть дочерний компонент, который будет отображать детали о скрипте.Я передаю имя скрипта в качестве входных данных для моего дочернего компонента каждый раз.Я получаю данные с сервера и отображаю их на странице child.html.

Здесь, когда я каждый раз щелкаю скрипт, детали старого скрипта заменяются деталями нового скрипта (щелкнул скрипт).Я не хочу, чтобы детали моего старого сценария исчезали, когда я нажимал на новый

Я новичок в angular.Может ли кто-нибудь помочь мне с этим.По сути, я хочу загрузить один и тот же компонент несколько раз для разных входов и отобразить все вместе. Ниже приведен лишь пример кода, которого я пытаюсь достичь.

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>     

- Вызов дочернего компонента с выбранным сценарием в качестве ввода

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

Здесь, если я сначала нажму на «Сценарий А», он покажет «Сценарий А», а затем, если я нажму на «Сценарий Б», детали «Сценарий А» будут заменены на «Сценарий Б».

Я хочу показать обе детали одновременно .. Скрипт А и во время загрузки (в ожидании ответа от сервера), если я нажму Скрипт Б, он должен начать загрузку, и обе детали скрипта должны появляться всякий раз, когдаимеется в наличии.

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 в угловой документации. Это поможет повысить производительность и не обновлять весь отображаемый шаблон при каждом добавлении нового элемента в массив.