Angular：显示来自组件的模态

Question

我有一个 app.component.ts，这是我的主要组件。有他的 app-routing.module.ts，默认情况下会将您带到“CalibrationComponent”页面。

app.component.html

<nav class="navbar navbar-default">

  <div class="container-fluid">

    <div class="navbar-collapse">

      <ul class="nav navbar-nav">

        <li routerLinkActive="active"><a routerLink="auth">Authentification</a></li>

        <li routerLinkActive="active"><a routerLink="appareils">Appareils</a></li>

      </ul>

    </div>

  </div>

</nav>

<div class="container">

  <div class="row">

    <div class="col-xs-12">

      <router-outlet></router-outlet>

    </div>

  </div>

</div>

我的 calibration.component.html 看起来像这样：

<p> Calibration works !</p>

<!-- Modal -->

<ng-template #content >

    <div class="modal-header">

        <h4 class="modal-title" id="modal-basic-title">Profile update</h4>

    </div>

    <div class="modal-body">

        <p> Header body</p>

    </div>

    <div class="modal-footer">

        <p> Header footer</p>

    </div>

</ng-template>

<div class="calibrationDiv" *ngIf="startCalibration" >

    <input type="button" class="Calibration" id="Pt1">

    <input type="button" class="Calibration" id="Pt2">

    <input type="button" class="Calibration" id="Pt3">

    <input type="button" class="Calibration" id="Pt4">

    <input type="button" class="Calibration" id="Pt5">

    <input type="button" class="Calibration" id="Pt6">

    <input type="button" class="Calibration" id="Pt7">

    <input type="button" class="Calibration" id="Pt8">

    <input type="button" class="Calibration" id="Pt9">

</div>

我的 calibration.component.ts 看起来像这样：

import { Component, Input, ViewChild, AfterViewInit } from '@angular/core';

import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';

@Component({

  selector: 'app-calibration',

  templateUrl: './calibration.component.html',

  styleUrls: ['./calibration.component.scss']

})

当我转到我的校准组件（这是默认路径）时，我的模式没有显示。你知道为什么吗？

谢谢。

Answer 1

我修好了它。我有 nodemodule bootstrap 3.7，它与 ng-bootstrap 不兼容。我不得不将 bootstrap 升级到 4.0，现在一切正常。谢谢。