[英]Show Bootstrap modal using (#myModal).modal('show') from Angular component
[英]Angular : Show a modal from a component
我有一個 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 bootstrap 3.7,它與 ng-bootstrap 不兼容。 我不得不將引導程序升級到 4.0,現在一切正常。
謝謝。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.