从组件设置 TemplateRef 值

Question

我正在使用第三方插件"angular-mention"，它是通过以下方式获取模板的。

<ng-template #mentionListTemplate let-item="item">
  <div class="media">
    <img class="mr-3" src="{{item.avatar}}" alt="" width="30" height="30">
    <div class="media-body text-right">
      <h6 class="mt-0 mb-0">{{item.name}}</h6>
      <small>@{{item.username}}</small>
    </div>
  </div>
</ng-template>

模板是这样绑定的。

<textarea [mentionListTemplate]="mentionListTemplate"</textarea>

我的问题是，我有很多 angular textarea 提及设置，每个地方都需要 mentionListTemplate 因此很难管理所有地方的模板设置。现在我想通过使用服务或指令从一个地方提供这个 mentionListTemplate。

如何从组件传递 mentionListTemplate ？谢谢

Answer 1

您可以为 item 创建一个带有输入参数的可重用组件：

@Component({
  selector: 'app-textarea',
  template: `
    <textarea [mentionListTemplate]="mentionListTemplate"></textarea>
    <ng-template #mentionListTemplate let-item="item">
      <div class="media">
        ...
      </div>
    </ng-template>
  `
})
export class TextareaComponent  {
  @Input() item: IItem = { /* some default value */ };
}

因此您可以轻松地在其他组件中使用它： <app-textarea [item]="someItem"></app-textarea>

p.s。您也可以扩展此组件并通过实现 ControlValueAccessor 创建自定义表单控件。在这种情况下，您的文本区域将表现得像一个普通的表单控件元素。有关详细信息，请查看 this article.

从组件设置 TemplateRef 值

Set TemplateRef value from component

angular-template

angular