Question

我正在尝试在Angular2 / 5中的谷歌地图上显示一个弹出窗口，当点击按钮时，模态保持隐藏状态。我正在使用MEAN堆栈，并尝试使用console.logs调试，它向我显示它使我的组件ts文件然后服务但是LESS永远不会被激活以显示模态并且modal.component中没有触发日志.TS。这是我一直在关注的教程是缺少让这个与MEAN堆栈和nodejs一起工作的东西？ http://jasonwatmore.com/post/2017/01/24/angular-2-custom-modal-window-dialog-box

Modal.compomemt.ts：

import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';

import { ModalService } from '../_services/index';

@Component({
    moduleId: module.id.toString(),
    selector: 'modal',
    template: '<ng-content></ng-content>'
})

export class ModalComponent implements OnInit, OnDestroy {
@Input() id: string;
private element: JQuery;

constructor(private modalService: ModalService, private el: ElementRef) {
    this.element = $(el.nativeElement);
}

ngOnInit(): void {
    let modal = this;

    // ensure id attribute exists
    if (!this.id) {
        console.error('modal must have an id');
        return;
    }

    // move element to bottom of page (just before </body>) so it can be displayed above everything else
    this.element.appendTo('body');

    // close modal on background click
    this.element.on('click', function (e: any) {
        var target = $(e.target);
        if (!target.closest('.modal-body').length) {
            modal.close();
        }
    });

    // add self (this modal instance) to the modal service so it's accessible from controllers
    this.modalService.add(this);
}

// remove self from modal service when directive is destroyed
ngOnDestroy(): void {
    this.modalService.remove(this.id);
    this.element.remove();
}

// open modal
open(): void {
    this.element.show();
    $('body').addClass('modal-open');
}

// close modal
close(): void {
    this.element.hide();
    $('body').removeClass('modal-open');
}
}

modal.service.ts：

import * as _ from 'underscore';

export class ModalService {
private modals: any[] = [];

add(modal: any) {
    // add modal to array of active modals
    this.modals.push(modal);
}

remove(id: string) {
    // remove modal from array of active modals
    let modalToRemove = _.findWhere(this.modals, { id: id });
    this.modals = _.without(this.modals, modalToRemove);
}

open(id: string) {
    // open modal specified by id
    console.log(id + " Service!!!");
    let modal = _.findWhere(this.modals, { id: id });
    console.log(modal);
    modal.open();
}

close(id: string) {
    // close modal specified by id
    let modal = _.find(this.modals, { id: id });
    modal.close();
}

}

我的主要组件中的代码打开和关闭服务：

openModal(id: string){
    console.log(id);
    this.modalService.open(id);
}

closeModal(id: string){
    this.modalService.close(id);
}

Modal.less：

modal {
/* modals are hidden by default */
display: none;

.modal {
    /* modal container fixed across whole screen */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* z-index must be higher than .modal-background */
    z-index: 1000;

    /* enables scrolling for tall modals */
    overflow: auto;

    .modal-body {
        padding: 20px;
        background: #fff;

        /* margin exposes part of the modal background */
        margin: 40px;
    }
}

.modal-background {
    /* modal background fixed across whole screen */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* semi-transparent black  */
    background-color: #000;
    opacity: 0.75;

    /* z-index must be below .modal and above everything else  */
    z-index: 900;
}
}

body.modal-open {
    /* body overflow is hidden to hide main scrollbar when modal window is open */
    overflow: hidden;
}

Answer 1

如果您通过关注该链接的示例来学习角度，那么您自己也会受到伤害。有角度的方法来做到这一点。我建议你看看像Material2和CDK这样的东西，然后找到关于它们的教程，抛弃jquery并从头开始。对不起，答案不好，但我不能袖手旁观，因为人们教人们做错了。准备冒这个原则的风险：）

点击时不会出现Angular2模态/弹出框

1 个答案: