[英]How can i open a modal in angular 7 without using a button click,
How can i open a modal in angular 7 without using a button click.如何在不使用按钮单击的情况下以 angular 7 打开模态。 i need to open a modal when i get a response from one of the API without using a button click.当我在不使用按钮单击的情况下从其中一个 API 获得响应时,我需要打开一个模式。 i am new to angular.我是 angular 的新手。 My HTML :我的 HTML :
<ng-template #Qpaper let-c="close" let-d="dismiss">
<div class="modal-header text-white" >
<div class="modal-title " id="modal-basic-title" >
<h4>Draft Selected Question</h4>
</div>
<button type="button" class="close text-white" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body p-0">
<p>q paper preview </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="d('Cross click')">Cancel</button>
</div>
I have tried folling codes to trigger modal event :我尝试过以下代码来触发模态事件:
this.modalService.open('Qpaper');
this.modalService.open(data.response , Qpaper)
you can see this example https://stackblitz.com/edit/angular-modal-service?file=app%2Fapp.component.ts你可以看到这个例子https://stackblitz.com/edit/angular-modal-service?file=app%2Fapp.component.ts
Then call onCreateModal()
in AppComponent
without button click u can open modal然后在AppComponent
调用onCreateModal()
没有按钮点击你可以打开模态
You need to use View Child and get the reference from the template.您需要使用 View Child 并从模板中获取引用。
@ViewChild('Qpaper') private qpaper;
Don't forget to import ViewChild.不要忘记导入 ViewChild。
import { ViewChild } from '@angular/core';
finally you can then simply do this最后你可以简单地做到这一点
this.modalService.open(qpaper);
You could wrap the modal in it's own component.您可以将模态包装在它自己的组件中。
my-modal.component.ts我的modal.component.ts
import { Component, OnInit, Input } from '@angular/core';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-my-modal',
templateUrl: './my-modal.component.html',
styleUrls: ['./my-modal.component.css']
})
export class MyModalComponent implements OnInit {
@Input() response: any;
constructor() { }
ngOnInit() {
}
}
my-modal.component.html我的modal.component.html
<div class="modal-header text-white" >
<div class="modal-title " id="modal-basic-title" >
<h4>Draft Selected Question</h4>
</div>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body p-0">
<p>q paper preview </p>
<p class="card-text">ID: {{ response.id }}</p>
<p class="card-text">Title: {{ response.title }}</p>
<p class="card-text">Value: {{ response.value }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="activeModal.close('Close click')">Cancel</button>
</div>
Then it can be imported in the parent component and opened as per requirement.然后它可以导入到父组件中并根据需要打开。 In your case on a valid response from a API request.在您的情况下,来自 API 请求的有效响应。
Parent component父组件
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { MyModalComponent } from './my-modal/my-modal.component';
export class AppComponent implements OnInit {
constructor(private modalService: NgbModal) { }
ngOnInit() {
this._apiService.getDetails().subscribe(
response => {
this.openMyModal(response);
},
error => {
console.error('Unable to retrieve data from API: ', e);
}
);
}
openMyModal(response: any) {
const modalRef = this.modalService.open(MyModalComponent);
modalRef.componentInstance.response = response;
}
}
Then call openMyModal()
function when you receive the valid response from the API request.然后在收到来自 API 请求的有效响应时调用openMyModal()
函数。
One advantage of this approach is, as with any other component, it allows you to open as many modals as you need in the parent component.这种方法的一个优点是,与任何其他组件一样,它允许您在父组件中根据需要打开任意数量的模态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.