Angular 2 динамических `имя переменной шаблона` `для DynamicComponentLoader?

TL; ДР:

• работает, но не динамически
• динамический, но не работает

Объяснение:

Я динамически создаю компоненты Angular 2, используя DynamicComponentLoader loadIntoLocation().

Место для вставки компонента, сгенерированного этой функцией, определяется его параметром anchorName, за исключением того, что вы должны передать Template Variable Name (как строка).

Итак, в примере они используют <div #child></div> в шаблоне, а затем передают 'child'. Что отлично работает.

Однако вместо того, чтобы связать сгенерированные компоненты с элементом с переменным именем, жестко закодированным в шаблоне, я хотел бы иметь возможность, скажем, добавить их в список с переменным размером.

Теперь страница NgFor показывает, что у вас есть доступ к индексной переменной: <li *ng-for="#item of items; #i = index">...</li>. Таким образом, это сработает, если я могу назначить элементы списка таким именам имен шаблонов, которые используются для этого индекса или тому подобное, т.е. #child1, #child2 и т.д.

Итак, я склонен попробовать <div #{{foo}}></div> с переменной приложения foo как "child". У меня возникла проблема с отладкой, поскольку интерфейс не показывает эти имена переменных шаблона в DOM, но кажется, что это динамическое назначение не работает, что приводит к ошибке "Could not find variable ...".

Можно ли каким-то образом сделать то, что я хочу? Или даже просмотреть назначенный Template Variable Name из браузера для отладки?

Ответы

// This will generate dynamically the id value
template: `
  <div *ng-for="#idx of data">
    <div id="dynamicid_{{idx}}">Dynamic</div>
  </div>`

this.data = [1,2,3,4,5,6];

for(var i = 0; i < this.data.length; i++) {
  // Third argument is the injector that I'm not using, so I just nulled it
  dynamicComponentLoader.loadAsRoot(DynamicComponent, '#dynamicid_'+this.data[i], null);
}