时间戳

首页 > 解决方案 > 什么是内容（参考）内容：TemplateRef在角度？

angular - 什么是内容（参考）内容：TemplateRef在角度？

问题描述

您好，我正盯着 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

标签： angularangular-bootstrap

解决方案

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

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

this.modalService.open(YourModalComponent, yourOptions)

不传递模板中的内容（仅如此openModal(note)），或者您可以在组件中声明模板：

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

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

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

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

一些有用的链接：

推荐阅读