Как динамически менять шаблон в Angular?

У меня есть общий абстрактный компонент, который отображает дерево.

Мне нужно динамически изменять шаблон для этого компонента по условию?

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

Допустим, у меня есть дерево стран / городов.

На одной странице мне нужно показать, что в структуре DOM:

<div class="root">
    <div class="parent">
       <div class="children"></div>
    </div>
</div>

На другой странице мне нужно показать ту же модель DOM, но с некоторыми отличиями.

  <div class="root">
        <div class="parent">
           <div class="children"><label></label><input></div>
        </div>
    </div>

Итак, конечно, я могу использовать один шаблон и использовать *ngIf, чтобы определить, какой элемент DOM показать / скрыть.

Но мне нужно разделять шаблоны и загружать их динамически.


angular angular8 angular5
person OPV    schedule 19.12.2019    source источник
comment
Неясно, о чем вы спрашиваете. Не могли бы вы добавить код?   -  person Jacopo Sciampi    schedule 19.12.2019
comment
Конечно, минутку, проверьте еще раз, пожалуйста   -  person OPV    schedule 19.12.2019
comment
Отлично, я считаю, что вы можете решить эту проблему очень легко, используя <ng-template>: blog.angular-university.io/   -  person Jacopo Sciampi    schedule 19.12.2019
comment
Ваш пример мне кажется, что было бы просто использовать * ngIf, как вы уже упоминали. Становится ли ваше дело более сложным? Если вы добавляете одни и те же объекты в несколько точек, вы должны поместить их в ng-template: ‹label› ‹/label› ‹input› в вашем примере.   -  person Chund    schedule 19.12.2019

Ответы (1)


arrow_upward
1
arrow_downward

Показать шаблон на основе переменной. Для выбора шаблона используйте *ngIf. Приведу пример:

HTML общего компонента:

<ng-container *ngIf="showWithoutLabel; else showWithLabel">
    <div class="root">
        <div class="parent">
           <div class="children"></div>
        </div>
    </div>
</ng-container>
<ng-template #showWithLabel>
    <div class="root">
        <div class="parent">
           <div class="children"><label></label><input></div>
        </div>
    </div>
</ng-template>

Машинопись:

showWithoutLabel = false;
person StepUp    schedule 19.12.2019
comment
То же самое, что я думал ранее, данные древовидной структуры я заполняю рекурсивно в машинописном тексте и в зависимости от сценария, который я могу визуализировать во внешнем интерфейсе. Таким образом, часть рендеринга html - это терминал дампа, и он будет отображать данные из машинописного текста. - person jalil; 19.12.2019