Блог

У меня есть 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']
})


export class CalibrationComponent implements AfterViewInit {
  @Input() startCalibration: boolean = true;
  @ViewChild("content") content: any;

  constructor(private modalService: NgbModal) { }

  ngAfterViewInit(): void {
    this.modalService.open(this.content);
  };
}
 

Когда я перехожу к своему компоненту калибровки (это маршрут по умолчанию), мой модал не отображается. Вы знаете, почему?

Спасибо.

Я это исправил.

У меня был загрузочный модуль nodemodule 3.7, который несовместим с ng-bootstrap. Мне пришлось обновить bootstrap до 4.0, и теперь все работает.

Спасибо.