Как повторно использовать шаблон HTML блока в Angular?

Question

Предположим, у нас есть html-блок в файле:

<div id="text">Text</div>

Как я могу использовать этот HTML-код ниже в том же файле, я имею в виду что-то вроде этого:

<re-use id="text"></re-use>

Возможно ли это?

Answer 1

Я думаю, вы хотели снова использовать тот же самый блок html. Если я вас правильно понимаю, приведенный ниже код должен помочь

<ng-template #MsgRef >
        {{ mycontent }}
</ng-template>

Для повторного использования вышеуказанного блока в том же шаблоне,

 <ng-template [ngTemplateOutlet]="MsgRef"></ng-template> //reuse any number of times

Answer 2

Создание нового компонента является наиболее распространенным способом, но иногда вам нужно только повторить локальную разметку, и ng-template позволяет это.

Что интересно, и даже можно передать контекст, чтобы можно было использовать привязку данных:

<ng-template #tplPerson let-person>
    <span class="person-id">{{person.id}}</span>
    <span class="person-alias" *ngIf="!!person.alias">"{{person.alias}}"</span>
    <span class="person-name">{{person.name}}</span>
</ng-template>

let-person без значения определяет переменную контекста person со значением, установленным на $implicit при создании экземпляра шаблона:

<ng-template *ngTemplateOutlet="tplPerson; context: {$implicit: thePerson}"></ng-template>

Дополнительные параметры см. В документации NgTemplateOutlet .

Answer 3

Вы можете создать собственный html-тег, используя angular, а затем импортировать тот компонент в свой модуль, который хочет использовать эти пользовательские теги. Тогда вам будет разрешено использовать тот же тег на HTML-странице. Создан небольшой пример, который может помочь вам понять?

https://stackblitz.com/edit/angular-stackoverflow