Question

我正在尝试实现一个模态 https://plnkr.co/edit/VSOzZ8AJz61az9TANGsp?p=preview

但是，我试图将模态放入一个组件而不是指令，如上面的plunker所示。我咆哮了一个错误（$ .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 ********** ****************************

我刚刚使用了bootstrap Modal，它工作且易于实现 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

尝试添加此

import * as $ from 'jquery';

或

declare const jQuery: {
  confirm: Function
};

并在您的代码中

jQuery.confirm();

Answer 2

尝试使用modal.confirm()代替$.confirm。

Answer 3

我刚刚使用了bootstrap Modal，它工作且易于实现 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");
    }

}

角度模态问题

3 个答案: