angular - 如何使用其他 Angular 组件中的 `templateref`？

Question

使用方法templateRef从其他组件模板文件？
我有 BatmanComponent , SpidermanComponent和 JokerComponent .其中一些具有相似的功能，因此我决定创建一个 HumanComponent ，并将所有可重用的 HTML 代码放入该文件中，如下所示:
注:HumanComponent永远不会被使用，它只是一个包含所有默认模板的文件。

<!-- human.component.ts -->
<ng-template #eye>
    Eyes: {{ size }}
</ng-template>
<ng-template #body>
    Body: bust {{ x[0] }}, waist {{ x[1] }}, hip {{ x[2] }} 
</ng-template>

我可以知道如何注入(inject)这些模板(来自human.component.ts)并在 batman.component.ts 中使用它吗？ ， ETC...？
我知道我可以这样做:(仅 如果 模板代码被复制粘贴到 bat 侠、蜘蛛侠和 clown HTML 文件中)

<!-- batman.component.ts -->
<ng-container *ngTemplateOutlet="eye; context: contextObj"></ng-container>

<ng-template #eye> ... </ng-template> <!-- need to copy/paste here, and use it locally -->

请问我怎么能 导出 templateRef到其他文件，并重新使用它们？我不想在这些文件中复制和粘贴类似的代码，我希望我可以有一个默认的模板文件，然后将这些代码导出给任何想要它的人。是否可以？

更新:
看完评论，我决定用 可重复使用的组件 而不是这种“技术”......也许，Angular 团队正在努力优化可重用组件的方法(正如@artyom、@rafael、@ibenjelloun 建议的那样)，那么可能只是按照他们的方式走会更明智......哈哈。 ..
不管怎样，谢谢。

Answer 1

如果您创建 TemplatesService ，您可以在其中注册您的模板并在其他组件中使用它们:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TemplatesService {
  templates = {};
  add(name: string, ref) {
    this.templates[name] = ref; 
  }
  get(name: string) {
    return this.templates[name];
  }
}

然后，您可以从根组件将模板添加到服务:

{{ _templatesService.add('template1', template1) }}
{{ _templatesService.add('template2', template2) }}

<ng-template #template1 let-name="name">
  ****** Template 1 {{name}} ******
</ng-template>

<ng-template #template2 let-name="name">
  ----- Template 2 {{name}} ------
</ng-template>

并在另一个组件中使用它们:

<ng-container *ngTemplateOutlet="_templatesService.get('template1'); 
 context: {name: 'From Hello Component'}"></ng-container>

Here is a stackblitz demo.