[英]How to open a bootstrap modal window from other component in Angular 8?
我有一個需要在單擊按鈕時打開的引導模式窗口,它工作正常。 現在,我想從不同的組件打開相同的模態窗口,我嘗試了一些但它不起作用,以下是我的代碼,
<section>
<button type="button" class="btn btn-primary" (click)="openModal()">Sign In</button>
<div id="signInModal" class="modal fade m-5" role="dialog"
aria-labelledby="dialog-sizes-name2" data-backdrop="static">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<h6 class="circularBold signUpHeading">Sign In</h6>
<button type="button" class="close" aria-label="Close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form [formGroup]="signInForm">
<div class="mt-4">
<button type="button" class="btn buttons nextBtn circularBold w-100" (click)="login()">Log in</button>
<p class="black2E circularBook mt-4 font-size12">Don't have an account?
<a href="" class="circularMedium">Sign up</a>
</p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
TS
openModal() {
$('#signInModal').modal('show');
}
來自其他組件的代碼
modalRef: BsModalRef;
constructor(
private modalService: BsModalService
) { }
join(){
this.modalRef = this.modalService.show(SigninComponent);
}
任何幫助深表感謝。
提前致謝!!
從您第二次嘗試顯示對話框來看,很明顯您正在使用ngx-bootstrap
正如@MikeOne 所述不要在角度應用程序中使用 JQuery Angular 足以將您的視圖綁定到模型
我試圖重現您的代碼並發現出於某種原因,將您的內容包裝在下面的代碼中似乎使您的代碼不顯示對話
<section>
<button type="button" class="btn btn-primary" (click)="openModal()">Sign In</button>
<div id="signInModal" class="modal fade m-5" role="dialog"
aria-labelledby="dialog-sizes-name2" data-backdrop="static">
<div class="modal-dialog modal-md">
<!-- Other Stuff here -->
</div>
</div>
</section>
在您的LoginComponent 中只需在下面
<div class="modal-content">
<div class="modal-header">
<h6 class="circularBold signUpHeading">Sign In</h6>
<button
type="button"
class="close"
aria-label="Close"
data-dismiss="modal"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form [formGroup]="signInForm">
<div class="mt-4">
<button
type="button"
class="btn buttons nextBtn circularBold w-100"
(click)="login()"
>
Log in
</button>
<p class="black2E circularBook mt-4 font-size12">
Don't have an account?
<a href="" class="circularMedium">Sign up</a>
</p>
</div>
</form>
</div>
</div>
最好使用ngx-boostrap
添加 ngx-bootstrap 如下:
ng add ngx-bootstrap --component modals
這是強制導入ModalModule
在app.module.ts
如下
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}
創建一個簡單的模板 parent.component.ts 文件應該如下
import { Component, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { TemplateComponent } from './tempalte/template.component';
@Component({
selector: 'app-parent',
templateUrl: './app.component.html'
})
export class ParentComponent {
modalRef: BsModalRef;
constructor(private modalService: BsModalService) {}
// Here the TemplateComponent includes the modal content. For that I have created another component name "TemplateComponent"
openModal() {
this.modalRef = this.modalService.show(TemplateComponent);
}
}
在模板組件中 template.component.ts 文件如下所示
import { Component } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal';
@Component({
selector: 'app-template',
templateUrl: './template.component.html'
})
export class TemplateComponent implements OnInit {
constructor(public modalRef: BsModalRef) { }
ngOnInit(){}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.