什么是内容（参考）内容：angular 中的 TemplateRef<any>？

Question

你好，我正开始使用 Angular，当我将带有 bootstrap 的模式添加到我的 html 时，我发现我需要发送我从未发送过的参数内容声明

<tbody *ngIf="!loading">
        <tr
          (click)="openModal(content,note)"
          *ngFor="let note of notesAndCommentsContainer"
        >
          <td>{{ note.author }}</td>
          <td>{{ note.preview }}</td>
          <td>{{ note.property }}</td>
          <td>{{ note.date }}</td>
        </tr>
      </tbody>

然后进入打字稿下一个

openModal(content:object,note:object) {
    this.modalTitle = note['author'];
    this.modalDate = note['date'];
    this.modalBody = note['comment'];
    this.commentProperty = note['property'];
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'})    
  }

这很奇怪，我想知道如何从打字稿生成这个对象，因为有必要在 angular 中启动一个 bootstrap 模态我正在使用 Angular 12.2 .3

Answer 1

内容可以作为 TemplateRef 或组件类型提供。

因此您可以创建一个新组件并将其传递给函数：

this.modalService.open(YourModalComponent, yourOptions)

不传递模板中的内容（所以只有 openModal(note)）或者您可以在组件中声明一个模板：

<ng-template #yourModalTemplate let-modal>
...
</ng-template>

通过参考#yourModalTemplate（你可以给它起你喜欢的名字）

<tr (click)="openModal(yourModalTemplate,note)" ...>

如果您将组件类型作为内容传递，则可以使用 NgbActiveModal class 的实例注入这些组件的实例。然后，您可以使用 NgbActiveModal 方法从组件的“内部”关闭/关闭模式。

一些有用的链接：

什么是内容（参考）内容：angular 中的 TemplateRef<any>？

what is content (reference) content: TemplateRef<any> in angular?

angular-bootstrap

angular