Angular,对ng-template 使用外部模板

Angular, use an external template for ng-template

假设我在组件模板中有这样的代码:

<div *ngIf="user?.name; else dash-template">{{user?.name}}</div>

这在另一个组件模板中:

<div *ngIf="data?.datum; else dash-template">{{data?.datum}}</div>

在这两种情况下,如果没有数据,我想用 ng-template 中包含的模板 (dash-template) 替换我的 div。 现在我可以通过在两个文件中添加破折号模板来实现这一点。

破折号模板代码:

<ng-template #dash-template>
  <span>-</span>
</ng-template>

但是一旦我决定更改 dash-template 的内容,我将需要更改每个文件中 dash-template 内容的每个实例。

我尝试在上部组件 (app.component.html) 中包含 dash-template 以及使用外部 html 文件并将其与 link 标记一起包含在 [=44] 中=]: <head> ... <link rel="import" href="dash.template.html" > ... </head>

但在第一种情况下我什么也没做:没有错误,并且显示了一个空字符串。 在第二种情况下(带有 link 标签),它找不到 html 文件。


我的问题是:

有没有办法定义可重用的 ng-template,或者更常见的是可重用的 template reference variables

这是处理空数据的正确方法吗?

我的方法是首先在服务中放置一个标志。从每个需要显示该模板的组件,检查数据可用性并相应地设置该标志。然后基于该模板创建一个新组件。该组件将是所有其他组件的子组件。根据标志将整个内容置于 *ngIf 条件下。 从所有组件中删除 "if-else -template"。

对于这个特定的用例,更简单的方法可能是: <div>{{user?.name || '-'}}</div>