角模态不显示

Question

概述：

我开始学习Jhipster和Angular，我试图制作一个在登录后显示的Modal，但我只得到了黑色阴影

我的想法： 我认为我缺少一些东西，但是文档对我来说有点复杂，而且我看起来很简单

这是我的html组件：​​

<ng-template #modalMensaje let-modal>
    <div class="modal-header">
        <h4 class="modal-title">
            <span>{{mensajeInicial.titulo}}</span>
        </h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
            <span aria-hidden="true">&times;</span>
          </button>
    </div>
    <div class="modal-body">
        <p> <span>{{mensajeInicial.mensaje}}</span></p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>

    </div>
</ng-template>   

这是ts组件：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import {ViewChild, ElementRef} from '@angular/core';
import { IMensajeInicial } from 'app/shared/model/mensaje-inicial.model';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'sigem-mensaje-inicial-detail',
    templateUrl: './mensaje-inicial-detail.component.html'
})
export class MensajeInicialDetailComponent implements OnInit {
    mensajeInicial: IMensajeInicial;
    @ViewChild("#modalMensaje") modal: ElementRef;

    constructor(private activatedRoute: ActivatedRoute, private modalService: NgbModal) {}

    ngOnInit() {
        this.activatedRoute.data.subscribe(({ mensajeInicial }) => {
            this.mensajeInicial = mensajeInicial;
            this.abrirModal(this.modal ,mensajeInicial);
        });
    }

    previousState() {
        window.history.back();
    }

    abrirModal(modal, mensajeInicial: any){
        this.mensajeInicial = mensajeInicial;
        this.modalService.open(modal);
    }

}

这是它的外观：

问题：

什么是显示模态的正确方法？

注释 就像您可以看到我正在学习一样，所以我不熟悉Jhipster和Angular ...因此，如果我错过了一些重要信息，请对其进行评论，以便我可以添加它。