TSファイル内のfuncitonとしての私のモーダルダイアログ

Question

こんにちは私の仲間stackoverflowers、

は、私は私が素朴な疑問を持っていると思います。

私のHTMLには、モーダルダイアログがポップアップしています。 ng2 Bootstrapを使用します。それは動作し、すべてけど...私はこのコード

"<button class="btn btn-primary" (click)="showModal()">Login</button>"

（showModal（））

は、私はどうすればよいの関数としての私のTSファイルに

showModal(modal: ModalDirective) { 

    } 

をそれを交換したいですこの？私はすでに1時間以上苦労しています。

これは私の完全なHTMLコードです。

<button class="btn btn-primary" (click)="showModal()">Login</button> 

<!-- Modal --> 
<div bsModal #lgModal="bs-modal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <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">Login</h4> 
     </div> 

     <div class="modal-body"> 
     <form id="myForm" role="form" [ngFormModel]="CreateGroup"> 
      <div class="form-group"> 
      <div class="input-group"> 
       <input type="text" [(ngModel)]='demoInfo.name' class="form-control" ngControl='name' placeholder="Gebruikersnaam"> 
       <label for="uLogin" class="input-group-addon glyphicon glyphicon-user"></label> 
      </div> 
      </div> 

      <div class="form-group"> 
      <div class="input-group"> 
       <input type="password" [(ngModel)]='demoInfo.password' class="form-control" ngControl='password' placeholder="Wachtwoord"> 
       <label for="uPassword" class="input-group-addon glyphicon glyphicon-lock"></label> 
      </div> 
      </div> 
     </form> 

     <div class="modal-footer"> 
      <button type="button" [disabled]='!CreateGroup.valid' (click)="addNewGroup(demoInfo)" class="btn btn-primary">Login</button> 
     </div> 
     </div> 

    </div> 
    </div> 

とヒットだから、これは私が何をしたかである私の完全なTSコード

import { Component } from '@angular/core'; 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
import { CORE_DIRECTIVES, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder } from '@angular/common'; 
import { ModalDirective, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap'; 


class DemoInfo { 
    name: string; 
    password: string; 
} 

@Component({ 
    template: require('./template.component.html'), 
    directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, ModalDirective], 
    viewProviders: [BS_VIEW_PROVIDERS] 
}) 

export class ModalComponent { 
    CreateGroup: ControlGroup; 
    demoInfo: DemoInfo; 
    modal: ModalDirective; 
    constructor(fb: FormBuilder) { 
    this.demoInfo = new DemoInfo(); 


    this.CreateGroup = fb.group({ 
     'name': new Control(this.demoInfo.name), 
     'password': new Control(this.demoInfo.password) 
    }) 
    } 
    addNewGroup(demoInfo: DemoInfo) { 
    console.log(demoInfo, 'whole object'); 
    this.demoInfo = new DemoInfo(); 
    } 

    showModal(modal: ModalDirective) { 

    } 

    hideModal(modal: ModalDirective) { 

    } 

} 

Answer 1

です。

1. 私は

2. がshowModal()

3. と呼ばれる新しい機能を作り、this.modal.dosomething();

を呼び出すことによって、それを参照し、私のModalComponentで @ViewChild('lgModal') modal: any;を追加しました