Question

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

<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。现在，我可以通过在两个文件中添加dash-template来实现这一目标。

破折号模板代码：

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

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

我尝试在上部组件（app.component.html）中包含dash-template，并使用外部html文件并将其与index.html中的link标记一起包含： <head> ... <link rel="import" href="dash.template.html" > ... </head>

但是在第一种情况下我什么都没做：没有错误，显示空字符串。在第二种情况下（带链接标记），它找不到html文件。

我的问题是：

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

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

Answer 1

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

Answer 2

对于此特定用例，一种更简单的方法可以是： <div>{{user?.name || '-'}}</div>

Angular，使用外部模板进行ng-template

2 个答案: