Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

angular - Open ng-bootstrap modal programmatically

I've got an angular 4 page including a ng-bootstrap modal. My code looks like this.

foo.html

[...]
<button class="btn btn-sm btn-secondary material-icons"
(click)="open(content)">search</button>

<ng-template #content let-c="close" let-d="dismiss">
    content in here
</ng-template>
[...]

foo.ts

[...]
constructor(private modalService: NgbModal) { }
[...]
open(content) {
   let options: NgbModalOptions = {
     size: 'lg'
   };

   this.modalService.open(content, options);
}
[...]

Now when I click the button the modal opens. What I want to do now is open the model on ngChanges.

ngOnChanges(changes: any) {
   open(content)
}

My problem is: How do I get the "content" here? Is there any way to get the ng-template programmatically? Thanks in advance!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

To access the content element inside the class, declare:

@ViewChild('content', { static: false }) private content;
                         ^for Angular8+

and add the corresponding import at the top of the class:

import { ViewChild } from '@angular/core';

and finally call open method for that element on change detection:

ngOnChanges(changes: any) {
   this.open(this.content);
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...