角度モーダル問題

Question

私はしかし、私は上記のplunkerに示すように、代わりにディレクティブのコンポーネントにモーダルを入れしようとしています https://plnkr.co/edit/VSOzZ8AJz61az9TANGsp?p=preview

からモーダルを実装しようとしています。 1つのエラー（$ .confirm）に怒りました

import { Component, Output, HostListener, EventEmitter, Directive, ElementRef, NgModule,Input } from '@angular/core'; 


import { Overlay } from 'ngx-modialog'; 
import { Modal } from 'ngx-modialog/plugins/bootstrap'; 



@Component({ 
    selector: 'modal', 
    moduleId: module.id, 
    templateUrl: 'modal.component.html' 

}) 
export class ModalComponent { 
    closeResult: string; 

    name: string; 
    constructor(public modal: Modal) { 
     this.name = 'Angular version' 
    } 

    @Output('confirm-click') click: any = new EventEmitter(); 

    @HostListener('click', ['$event']) clicked(e) { 
     $.confirm({ 
      buttons: { 
       confirm:() => this.click.emit(), 
       cancel:() => { } 
      } 
     }); 
    } 

} 

エラー：名前 '$'が見つかりません。

************************************ UPDATE ********* *****************************

私はちょうど動作し、実装しやすいブートストラップモーダルを使用しました モーダル。 HTML

<div> 


    <span class="fa fa-trash-o" data-toggle="modal" data-target="#myModal"> 

    </span> 
    <div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 

        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Confirm</h4> 
       </div> 
       <div class="modal-body"> 
        <p>Delete this record?</p> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="onOk()">OK</button> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 

       </div> 
      </div> 
      <div> 

      </div> 
     </div> 
    </div> 
</div> 

Modal.ts

 import { Component, Output, HostListener, EventEmitter, Directive, ElementRef, NgModule,Input } from '@angular/core'; 


import { Overlay } from 'ngx-modialog'; 
import { Modal } from 'ngx-modialog/plugins/bootstrap'; 

declare const jQuery: { 
    confirm: Function 
}; 

@Component({ 
    selector: 'modal', 
    moduleId: module.id, 
    templateUrl: 'modal.component.html' 

}) 
export class ModalComponent { 
    @Output() open: EventEmitter<any> = new EventEmitter(); 


    onOk() { 
     console.log("OK"); 
     this.open.emit('yes'); 
    } 
    onDelete() { 

     console.log("Cancel"); 
    } 

} 

Answer 1

この

を追加しよう

または

declare const jQuery: { 
    confirm: Function 
}; 

し、あなたのコード内の

jQuery.confirm(); 

Answer 2

modal.confirm()の代わり$.confirm試してみてください。

Answer 3

私はちょうど modal.html

<div> 


    <span class="fa fa-trash-o" data-toggle="modal" data-target="#myModal"> 

    </span> 
    <div class="modal fade" id="myModal" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 

        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Confirm</h4> 
       </div> 
       <div class="modal-body"> 
        <p>Delete this record?</p> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="onOk()">OK</button> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 

       </div> 
      </div> 
      <div> 

      </div> 
     </div> 
    </div> 
</div> 

Modal.ts

 import { Component, Output, HostListener, EventEmitter, Directive, ElementRef, NgModule,Input } from '@angular/core'; 


import { Overlay } from 'ngx-modialog'; 
import { Modal } from 'ngx-modialog/plugins/bootstrap'; 

declare const jQuery: { 
    confirm: Function 
}; 

@Component({ 
    selector: 'modal', 
    moduleId: module.id, 
    templateUrl: 'modal.component.html' 

}) 
export class ModalComponent { 
    @Output() open: EventEmitter<any> = new EventEmitter(); 


    onOk() { 
     console.log("OK"); 
     this.open.emit('yes'); 
    } 
    onDelete() { 

     console.log("Cancel"); 
    } 

}