Angular 2.訪問子視圖

Question

我使用ng2-bootstrap和模態組件。但是，問題不在於ng2-bootstrap。我有以下的模板在我root組件：

... for brevity 
<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modalLabel" 
    aria-hidden="true"> 
    <div class="modal-dialog modal-md"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       <h4 class="modal-title">Header</h4> 
      </div> 

      <div class="modal-body"> 
       <p>Modal body</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default">Save</button> 
      </div> 
     </div> 
    </div> 
</div> 

我想lgModal的一個組成部分。所以，在我有的組件：

@ViewChild('lgModal') 
public lgModal: ModalDirective; 

所有的工作正常。但是，我想把modal html分開組件。例如，app-modal。然後，在root組件我有：

...for brevity 
<app-modal></app-modal> 

但是，在這種情況下，lgModal在root組件是不確定的。如何正確使用它？

Answer 1

在你的父組件定義子組件這樣的：

@ViewChild(AppModalComponent) appModalComponent: AppModalComponent; //assuming the name of the child component is AppModalComponent 

移動

@ViewChild('lgModal') 
public lgModal: ModalDirective; 

到子組件。 然後你就可以在你的父組件與

this.appModalComponent.lgModal = "something"; 

訪問的子組件的lgModal屬性即是。

Ref：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-calls-a-viewchild-