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

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 {
/* 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

如果您按照该链接中的示例学习 Angular，那么您就是在伤害自己。有 Angular 方法可以做到这一点。我建议您查看 Material2 和 CDK 之类的东西，并找到有关它们的教程，放弃 jquery 并从头开始。抱歉，答案不好，但我不能袖手旁观，因为人们教人们以错误的方式做事。准备冒这个原则被否决的风险:)