У меня есть родительский компонент с несколькими сценариями. У меня есть дочерний компонент, который будет отображать подробную информацию о скрипте. Я каждый раз передаю имя скрипта в качестве входных данных моему дочернему компоненту. Я получаю подробную информацию с сервера и отображаю ее в 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>
  

дочерний component.html

  @Input() script

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

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