假设我在组件模板中有这样的代码:
<div *ngIf="user?.name; else dash-template">{{user?.name}}</div>
这在另一个组件模板中:
<div *ngIf="data?.datum; else dash-template">{{data?.datum}}</div>
在这两种情况下,如果没有数据,我想用 ng 模板中包含的模板(破折号模板)替换我的div。 现在,我可以通过在两个文件中添加破折号模板来存档它。
破折号模板代码:
<ng-template #dash-template>
<span>-</span>
</ng-template>
但是一旦我决定更改破折号模板的内容,我就需要更改每个文件中破折号模板内容的每个实例。
我尝试在上层组件(app.component.html)中包含破折号模板,并使用外部html文件并将其与索引中的链接标签一起包含在索引中.html :<head> ... <link rel="import" href="dash.template.html" > ... </head>
但在第一种情况下,我什么也没做:没有错误并显示一个空字符串。 在第二种情况下(带有链接标记),它找不到 html 文件。
我的问题是:
有没有办法定义可重用的ng模板,或者更常见的是可重用的模板引用变量?
这是处理空数据的正确方法吗?
我的方法是首先在服务中放置一个标志。从需要显示该模板的每个组件中,检查数据可用性并相应地设置该标志。然后基于该模板创建新组件。此组件将是所有其他组件的子组件。将整个内容置于基于标志的 *ngIf 条件下。 从所有组件中删除"if-else -template"。
对于这个特定的用例,更简单的方法可能是:<div>{{user?.name || '-'}}</div>