Question

我想将子模态传递给我的父函数。我使用了这个Modal

app.html

<div class="head"><button class="headbtn" (click)="Popup(modal)">Add</button></div>
<div>
    <div class="centerDiv text-center" *ngFor="let hero of list">
      <div>
        <button class="glyphicon glyphicon-trash operation"></button>
        <button class="glyphicon glyphicon-pencil operation" (click)="Popup(modal)"></button>
      </div>
      <div><h4>{{hero.Name}}</h4></div>
   </div>
</div>
<custom-modal></custom-modal>

customModal.html

<modal #modal> <---- this Modal 
<modal-header [show-close]="true">
    <h4 class="modal-title">I'm a modal!</h4>
</modal-header>
<modal-body>
    Hello World!
</modal-body>
<modal-footer [show-default-buttons]="true"></modal-footer>

app.component.ts

export class AppComponent {

   list = [{ "Name": "App 1" }];

    Popup(modal) { <---  I am getting this modal undefined.
      debugger;
       modal.open();
    }
}

我该怎么做？

Answer 1

您可以尝试这样的事情：

<强> CustomModalComponent

@ViewChild('modal') public modal: ModalComponent;

<强> app.html

(click)="Popup(customModal.modal)"
...
<custom-modal #customModal></custom-modal>

<强> Plunker Example

另见

https://angular.io/docs/ts/latest/cookbook/component-communication.html

将子ID传递给父函数Angular 2

1 个答案: