角模态问题答案

【问题标题】：Angular Modal issue角模态问题
【发布时间】：2017-11-18 05:25:38
【问题描述】：

我正在尝试从 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: () => { }
            }
        });
    }

}

错误：找不到名称“$”。

************************************更新********** ******************************

我刚刚使用了 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");
    }

}

【问题讨论】：

你的 Plunkr 代码和上面的代码不一样。你能更新一下吗？

标签： angular

【解决方案1】：

尝试modal.confirm() 而不是$.confirm。

【讨论】：

【解决方案2】：

尝试添加这个

import * as $ from 'jquery';

或

declare const jQuery: {
  confirm: Function
};

在你的代码中

jQuery.confirm();

【讨论】：

感谢 Fateh，确实消除了错误，但是，由于我的 Jquery 文件而出错的页面不包含“确认”任何想法，我可以在哪里/如何获取文件功能？
我在哪里声明 Jquery 函数..我无法将它添加到我的 Jquery 文件中？更新了我上面的问题
replace import * as $ from 'scripts/jquery-1.10.2.js'; with 声明 const jQuery: { 确认：函数 };然后调用 jQuery.confirm
更新了我的代码..我得到错误：jQuery.confirm is not a function

【解决方案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");
    }

}

【讨论】：