angularjs - 動的コンテンツを含むモーダル ダイアログを開く

Question

ユーザー情報を表示するために ngbModal を使用しようとしています。1回ではなく2回開いています。

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のどちらの行も削除できません。これが、ダイアログの 2 つのインスタンスを取得している理由です。

AngularJS 2 でモーダル ダイアログを操作する方法を教えてください。例をいただければ幸いです。

ありがとうございました！