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 из браузера для отладки?

Ответ 1

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

Другим возможным подходом является использование loadAsRoot, который вместо использования имени переменной использует id, который может содержать динамическое имя.

// 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);
}

Здесь plnkr с примером работы.

Надеюсь, это поможет.

Ответ 2

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

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

И DynamicComponentLoader, о котором упоминалось в ответе Эрика Мартинеса, кажется, все равно исчезло из Angular 5 (не удалось найти его в документах).