Question

我有一个有角度的4页，包括一个ng-bootstrap模态。我的代码看起来像这样。

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);
}
[...]

现在当我点击按钮时，模态会打开。我现在要做的是在ngChanges上打开模型。

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

我的问题是：如何获得＆＃34;内容＆＃34;这里？有没有办法以编程方式获取ng-template？提前谢谢！

Answer 1

要访问类中的content元素，请声明：

@ViewChild('content') private content;

并在课程顶部添加相应的导入：

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

最后在变更检测器中调用该元素的open方法：

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

Answer 2

在Angular 8中，您还应该传递静态选项：ViewChild中的{static: false}

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

@ViewChild('content', { static: false }) private content;

constructor(private modalService: NgbModal) { }

this.modalService.open(this.content);

以编程方式打开ng-bootstrap模式

2 个答案: