Question

我正在尝试使用ngbModal来显示用户信息。我打开它两次而不是一次。

info.dialog.html

<template #content let-c="close" let-d="dismiss">
<div class="modal-header">
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
        <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">{{user.firstName}}&nbsp;{{user.lastName}}</h4>
</div>
<div class="modal-body">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <strong>data1:</strong>
            </div>
            <div class="col-md-4">
                {{user.data1}}
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <strong>data2:</strong>
            </div>
            <div class="col-md-4">
                {{user.data2}}
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Close</button>
</div>

info.dialog.ts

import { Component, ViewChild, OnInit, OnDestroy, Renderer  }     from '@angular/core';
import { NgbModal, ModalDismissReasons }    from '@ng-bootstrap/ng-bootstrap';
import { User }                             from '../Classes/user';
import { UserDialogService }                from '../Services/user.dialog.service';

@Component({
    selector: 'user-info-dialog',
    templateUrl: 'app/Dialogs/Templates/user.info.dialog.html'
})
export class UserInfoDialog implements OnInit, OnDestroy  {

    public user: user;
    @ViewChild('content') content: string;

    constructor(private dialogService: UserDialogService, private modalService: NgbModal) {
    }

    ngOnInit() {
        this.dialogService.dialogRequest.subscribe( (c: user) => this.show(c) );
    }

    ngOnDestroy() {
        this.dialogService.dialogRequest.unsubscribe();
    }

    private show(user: user) {
        this.user = user;
        this.modalService.open(this.content).result.then((result) => {}, (reason) => {});
    }
}

user.dialog.service.ts

import { Injectable, OnInit, EventEmitter, Output } from '@angular/core';
import { Observable }                       from 'rxjs/Observable';
import { Http, Headers, Response }          from '@angular/http';
import { UsersService }                     from './users.service';

import 'rxjs/add/operator/toPromise';
import { user }                             from '../Classes/user';

@Injectable()
export class userDialogService implements OnInit {

    @Output() dialogRequest = new EventEmitter<user>();

    constructor(private usersService: UsersService) {
    }

    ngOnInit() {
    }

    public show(id: number) {
        var user = this.usersService.getById(id);
        this.dialogRequest.emit(user);
    }
}

app.component.ts

<div class="container">

    <template ngbModalContainer></template>
    <user-info-dialog></user-info-dialog>

    <!-- more html code here -->
</div>

所以，基本上，我正在观看何时打开模态的事件。我无法删除 app.component.ts 中的行，因为在我的实现中需要它。这就是我得到对话框的两个实例的原因。

任何人都可以告诉我如何使用AngularJS 2中的模态对话框？希望得到一个例子。

谢谢！

Answer 1

显然问题出在 app.module.ts 中。我已经引导 info.dialog.ts 以确保它可以订阅该事件。删除该行可解决重复问题。

我真的想删除

<user-info-dialog></user-info-dialog>

来自app.component.html的

如果你知道怎么做，请告诉我。只是让对话框显示为对话框。谢谢！

打开包含动态内容的模式对话框

1 个答案: