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>

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

我该如何从组件传递提及列表模板？谢谢。

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扩展此组件并创建自定义表单控件。在这种情况下，您的textarea的行为将与通常的表单控件相同。有关更多详细信息，请检出this article。

从组件设置TemplateRef值

1 个答案: