angular2 - Verwenden der gleichen Komponente als verschachtelte Komponenten mit verschiedenen Eingaben mehrmals in ein Elternteil Komponente

Question

Ich versuche, eine Bootstrap-Popup-Komponente als verschachtelte Komponente mehrmals auf einer einzigen Seite zu verwenden. Diese Popup-Komponente hat andere Werte als @Input(). Das Problem ist, dass jedes Popup auf der Seite die gleichen Werte wie das letzte Popup hat. Also, wie kann ich mehrere Instanzen der gleichen verschachtelten Komponente bekommen? Hier

ist die übergeordnete Komponente:

@Component({ 
    selector: 'my-parent', 
    templateUrl: 'app/components/parent/parent.component.html', 
    directives: [PopupDirective] 
}) 
export class ParentComponent { 
    private doSomething() { 
     // do something 
    } 
} 

Dies ist die html meiner Stammkomponente:

<button class="btn btn-success" 
     (click)="popup1.show()">Call Popup 1</button> 

<button class="btn btn-success" 
     (click)="popup2.show()">Call Popup 2</button> 

<my-popup #popup1 
      [id]="1" 
      [title]="Popup 1" 
      [body]="This is my test popup 1" 
      (confirmation)="doSomething()"></my-popup> 

<my-popup #popup2 
      [id]="2" 
      [title]="Popup 2" 
      [body]="This is my test popup 2" 
      (confirmation)="doSomething()"></my-popup> 

Hier ist die Pop-up-Komponente:

@Component({ 
    selector: 'my-popup', 
    templateUrl: 'app/directives/popup/popup.directive.html' 
}) 
export class PopupDirective { 

    @Input() id: string; 

    @Input() title: string; 
    @Input() body: any; 

    @Output() confirmation: EventEmitter<string> = new EventEmitter<string>(); 

    private triggerPopup: string; 

    constructor() { 
     this.triggerPopup = "triggerPopup"; 
    } 

    confirm() { 
     this.confirmation.emit('Click from nested component'); 
    } 


    show() { 
     document.getElementById(this.triggerPopup).click(); 
    } 
} 

Und schließlich die html Code meines Popups

<a id="{{ triggerPopup }}" 
    href="#popup{{ id }}" 
    data-toggle="modal" 
    [hidden]="true"></a> 

<div class="modal fade" id="popup{{ id }}" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4>{{ title }}</h4> 
      </div> 
      <div class="modal-body"> 
       <div>{{ body }}</div> 
       <div style="clear: both;"></div> 
      </div> 
      <div class="modal-footer"> 
       <a class="bin ban-default" 
        data-dismiss="modal"> 
        Close</a> 

       <a class="bin ban-success" 
        data-dismiss="modal" 
        (click)="confirm()"> 
        Confirm</a> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Sie zuweisen die gleiche ID, die jedem Element

constructor() { 
    this.triggerPopup = "triggerPopup"; 
} 

und deshalb

document.getElementById(this.triggerPopup).click(); 

findet immer die erste, weil es die ganze Seite sucht und über Komponentengrenzen hinweg kümmert sich nicht darum.

Ich würde vorschlagen, Template-Variablen und @ViewChild() statt

<a #triggerPopup" 

export class PopupDirective { 
    @ViewChild('triggerPopup') triggerPopup:ElementRef; 

    show() { 
    this.triggerPopup.nativeElement.click(); 
    }