Angular, используйте внешний шаблон для ng-template

Допустим, у меня есть такой код в шаблоне компонента:

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

И это в другом шаблоне компонента:

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

В обоих случаях, если данных нет, я хочу заменить свой div шаблоном (шаблоном тире), содержащимся в шаблоне ng. Прямо сейчас я могу заархивировать это, добавив шаблон в оба файла.

код шаблона тире:

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

Но как только я решу изменить содержимое шаблона dash, мне нужно будет изменить каждый экземпляр содержимого шаблона dash в каждом файле.

Я попытался включить шаблон тире в верхний компонент (app.component.html), а также использовать внешний файл html и включить его с тегом ссылки в index.html: <head> ... <link rel="import" href="dash.template.html" > ... </head>

Но в первом случае я ничего не сделал: ошибки не было и показывалась пустая строка. Во втором случае (с тегом ссылки) он не может найти файл html.

Мои вопросы:

Есть ли способ определить многоразовый ng-шаблон или, чаще, многоразовые ссылочные переменные шаблона?

Это правильный подход к работе с пустыми данными?


angular ng-template template-variables
person Abel    schedule 24.01.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Мой подход - сначала поставить флаг в сервисе. Для каждого компонента, который должен отображать этот шаблон, сначала проверьте доступность данных и установите соответствующий флаг. Затем создайте новый компонент на основе этого шаблона. Этот компонент будет дочерним по отношению к любому другому компоненту. Поместите весь контент в условие * ngIf на основе флага. Удалите "if-else -template" из всех компонентов.

person Vega    schedule 24.01.2018
comment
Спасибо за быстрый ответ. Мне нравится эта идея, но это может привести к беспорядку флагов, потому что мне понадобится по одному для каждого подсвойства моего объекта. Например, в моей модели пользователь может иметь или не иметь возраст свойства, пол свойства, другой вес и так далее ... Я должен проверить каждое из этих подсвойств, и для каждого пустого свойства отображать тире, чтобы предотвратить пустую строку . - person Abel; 24.01.2018
comment
Вы можете предоставить один и тот же сервис для каждого компонента, чтобы каждый компонент имел свой собственный экземпляр сервиса, и флаги не перепутались. Также вы можете установить массив флагов - person Vega; 24.01.2018

arrow_upward
0
arrow_downward

Для этого конкретного варианта использования более простой подход может быть следующим: <div>{{user?.name || '-'}}</div>

person Abel    schedule 08.04.2019