Angular，为 ng-template 使用外部模板
Posted
技术标签:
【中文标题】Angular，为 ng-template 使用外部模板【英文标题】：Angular, use an external template for ng-template 【发布时间】：2018-07-03 07:56:02 【问题描述】：假设我在组件模板中有这样的代码：
<div *ngIf="user?.name; else dash-template">user?.name</div>
这在另一个组件模板中：
<div *ngIf="data?.datum; else dash-template">data?.datum</div>
在这两种情况下，如果没有数据，我想将我的 div 替换为包含在 ng-template 中的模板（dash-template）。 现在我可以通过在两个文件中添加 dash-template 来归档它。
破折号模板代码：
<ng-template #dash-template>
<span>-</span>
</ng-template>
但一旦我决定更改 dash-template 的内容，我将需要更改每个文件中 dash-template 内容的每个实例。
我尝试在上层组件 (app.component.html) 中包含 dash-template 以及使用外部 html 文件并将其与 index.html 中的链接标记一起包含：
<head> ... <link rel="import" href="dash.template.html" > ... </head>
但在第一种情况下，我什么也没做：没有错误并且显示一个空字符串。 第二种情况（带链接标签），找不到html文件。
我的问题是：
有没有办法定义一个可重用的 ng-template，或者更常见的是一个可重用的 template reference variables ？
这是处理空数据的正确方法吗？
【问题讨论】：
【参考方案1】：我的方法是首先在服务中放置一个标志。从需要显示该模板的每个组件中，检查数据可用性并相应地设置该标志。然后基于该模板创建一个新组件。该组件将是所有其他组件的子组件。根据标志将整个内容置于 *ngIf 条件下。 从所有组件中删除“if-else -template”。
【讨论】：
感谢您的快速回复。我喜欢这个想法，但这可能会导致一堆标志，因为我的对象的每个子属性都需要一个。例如，在我的模型中，用户可能有也可能没有属性年龄、属性性别、另一个体重等等……我必须检查这些子属性中的每一个，并为每个空属性显示一个破折号以防止出现空字符串. 您可以为每个组件提供相同的服务，因此每个组件都有自己的服务实例，并且标志不会混淆。您还可以设置一组标志【参考方案2】：对于这个特定的用例，一个更简单的方法可能是：
<div>user?.name || '-'</div>
【讨论】：
以上是关于Angular，为 ng-template 使用外部模板的主要内容，如果未能解决你的问题，请参考以下文章
Angular5 - 将ng-template父组件传递给子组件
在Angular ng-template中动态加载kendo ScrollView不起作用