Получите рекурсивный вложенный шаблонный вызов для работы в Angular 2?

Question

Я надеюсь, что название не вводит в заблуждение слишком много, поскольку я понятия не имею, как еще назвать, но вот проблема:

Я разрабатываю приложение с угловыми 2 и использовать вложенные шаблоны (надеюсь, что это право имя для них) в нескольких случаях. Теперь проблема заключается в том, что мое приложение состоит из нескольких «виджетов», которые могут содержать другие виджеты. Это может создать своего рода круг в вызовах шаблонов.

Пример:

home.html:

<div> some html stuff </div> 
<widget1 *ng-for="#widget of widgetList" [widget]="widget"></widget1> 

widget1.html:

<div> some html stuff unique to widget1 </div> 
<div *ng-if="widget.widgetSubList"> 
    <div *ng-for="#widget of widget.widgetSubList"> 
    <div [ng-switch]="widget.type"> 
     <p *ng-switch-when="2"><widget2 [widget]="widget"></></widget2></p> 
     <p *ng-switch-when="3"><widget3 [widget]="widget"></></widget3></p> 
    </div> 
    </div> 
</div> 

widget2.html

<div> some html stuff unique to widget2 </div> 
<div *ng-if="widget.widgetSubList"> 
    <div *ng-for="#widget of widget.widgetSubList"> 
    <div [ng-switch]="widget.type"> 
     <p *ng-switch-when="1"><widget1 [widget]="widget"></></widget1></p> 
     <p *ng-switch-when="3"><widget3 [widget]="widget"></></widget3></p> 
    </div> 
    </div> 
</div> 

widgetSubList это свойство виджета, заполняется, если он s-sub-widgets, ng-if работает в этом случае и не разбивает код, если нет суб-виджетов.

В этом случае происходит сбой, так как он создает упомянутый «круг» виджетов, содержащих виджеты, которые были в вышеупомянутой части дерева, поскольку виджет1 может вызывать widget2, который может снова вызвать виджет1. Я не могу изменить эту структуру, поскольку это предопределено API, который я использую в этом случае.

Итак, теперь вопрос: есть ли способ получить эту работу?

Поскольку все виджеты требуют разных реализаций, я не могу их обойти, не создавая один гигантский html-файл, заполненный ng-ifs, чего я бы хотел избежать.

PS: Я немного изменил пример, чтобы лучше представить код. @ Входящая часть присутствует в файлах .ts.

Прямо сейчас, я только зачитал еще один уровень подвижов из API для целей тестирования.

Answer 1

Что немного странно, так это то, что у вас нет петли виджетов в файлах widget1.html и widget2.html. С вашим инструментом вы всегда остаетесь в одних и тех же метаданных виджетов, так что это нормально, что у вас есть бесконечный цикл ...

На самом деле вам нужно иметь рекурсивную структуру, которая позволила бы определить структуру ваш компонент:

widgetList 
    widget 
    children 
     widget 
     children 
     widget 
     children 
    widget 
    children 
     widget 
     children 
    (...) 

Так что, когда текущий виджет не будет иметь детей, рекурсивный цикл закончится.

Так что я бы реорганизовать свои шаблоны, как это (например, для widget1.html):

<div> some html stuff unique to widget1 </div> 
<div *ng-for="#subWidget of widget.children"> 
    <div [ng-switch]="subWidget.type"> 
    <p *ng-switch-when="2"><widget2 [widget]="subWidget"></widget2></p> 
    <p *ng-switch-when="3"><widget3 [widget]="subWidget"></widget3</p> 
    </div> 
</div> 

Каждый виджет будет иметь вход, соответствующий метаданных виджета:

@Component({ 
    selector: 'widget1', 
    (...) 
}) 
export class Widget1Component { 
    @Input() 
    widget: any; 
}