[英]How to load the modal on page load angular 6
I am trying to create the modal, which will load on page load in angular 6, its working fine on click method which will pass one argument 我正在尝试创建模式,该模式将在角度6的页面加载中加载,在点击方法上可以正常工作,它将通过一个参数
I tried with ngOnInit, but its void type not taking the argument 我尝试了ngOnInit,但是它的void类型没有接受参数
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Select user</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<select >
<option value="volvo">Rohait</option>
<option value="saab">Anuj</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Save</button>
</div>
</ng-template>
Launch demo modal 启动演示模态
that I running using this 我正在使用这个
open(content) {
this.modalService.open(content);
}
But its not working here, its working on click method 但是它在这里不起作用,它在点击方法上起作用
If you are using Angular 8, first, you can declare this. 如果首先使用Angular 8,则可以声明它。
@ViewChild('content', { static: true }) content: TemplateRef<any>;
However, for those who are using Angular 7 and below, you should use this instead. 但是,对于使用Angular 7及更低版本的用户,您应该改用它。
@ViewChild('content') content: TemplateRef<any>;
The above will allow you to access the content
template reference variable within your Class. 上面的content
使您可以访问类中的content
模板引用变量。
And on your ngOnInit, 在您的ngOnInit上,
ngOnInit() {
this.modalService.open(this.content);
}
And do remember to import ViewChild
, as well as TemplateRef
into your component.ts, 并记得将ViewChild
和TemplateRef
导入到component.ts中,
import { TemplateRef, ViewChild } from '@angular/core';
This should allow your modalService
to open the modal. 这应该允许您的modalService
打开模式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.