angular2 - 在單個父組件中多次使用具有不同輸入的嵌套組件的相同組件

Question

我試圖在單個頁面上多次使用引導彈出組件作爲嵌套組件。此彈出組件採用與@Input()不同的值。問題是，頁面上的每個彈出窗口都具有與最後一個彈出窗口相同的值。那麼，我怎樣才能獲得同一個嵌套組件的多個實例呢？

這裏是父組件：

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

這是我的父組件的HTML：

<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> 

這裏是彈出組件：

@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(); 
    } 
} 

最後的HTML我彈出的代碼

<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

您分配相同的ID給每個元素

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

，因此

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

總能找到，因爲它搜索整個頁面，不關心組件邊界的第一個。

我建議你使用模板變量和@ViewChild()代替

<a #triggerPopup" 

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

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