Angular Modal Ausgabe

Question

ich jedoch ein modale von https://plnkr.co/edit/VSOzZ8AJz61az9TANGsp?p=preview

umzusetzen versuchen, Ich versuche, die modal in eine Komponente anstelle der Richtlinie zu setzen, wie oben in dem Plunker gezeigt. Ich raste in einen Fehler ($ .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:() => { } 
      } 
     }); 
    } 

} 

Fehler: Name '$' kann nicht gefunden werden.

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

Ich endete gerade mit Bootstrap Modal, die funktioniert und einfach zu implementieren 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"); 
    } 

} 

Answer 1

try dieses

hinzufügen

oder

declare const jQuery: { 
    confirm: Function 
}; 

und in Ihrem Code

jQuery.confirm(); 

Answer 2

Versuchen modal.confirm() statt $.confirm.

Answer 3

I Bootstrap-Modal nur am Ende mit, was funktioniert und leicht 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"); 
    } 

}