什么是内容（参考）内容：TemplateRef<any> 在角度？

【问题标题】：what is content (reference) content: TemplateRef<any> in angular?什么是内容（参考）内容：TemplateRef<any> 在角度？
【发布时间】：2021-09-15 12:59:22
【问题描述】：

您好，我正盯着 Angular 工作，当我在我的 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 启动引导模式我使用的是 Angular 12.2.3

【问题讨论】：

标签： angular angular-bootstrap

【解决方案1】：

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

所以你可以创建一个新组件并将其传递给函数：

this.modalService.open(YourModalComponent, yourOptions)

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

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

感谢引用 #yourModalTemplate 传递它（你可以给它起你喜欢的名字）

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

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

一些有用的链接：

【讨论】：