Программно вставляйте различные компоненты Angular2

Я хочу программно создать отчет, состоящий из нескольких отдельных компонентов из файла JSON, например:

{
    components: [UserStatsComponent, ActivityChartComponent, NetworkGraphComponent]
}

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

Я новичок в Angular2, поэтому я действительно не знаю, как к этому подойти: сначала я подумал о наследовании компонентов, но похоже, что аннотации angular2 не наследуются при расширении класса компонента. Не знаю, как решить это с помощью композиции.

Что-то слышал о теге контента, но не знаю, имеет ли он отношение к этому варианту использования.

тлдр; Как динамически вставлять разные компоненты из массива?


angular inheritance dynamic components composition
person Diego Castaño Chillarón    schedule 25.01.2016    source источник
comment
su pregunta no es clara... это создает путаницу. не могли бы вы сделать это лучше?   -  person micronyks    schedule 25.01.2016
comment
тлдр; Как динамически вставлять разные компоненты из массива?   -  person Diego Castaño Chillarón    schedule 25.01.2016
comment
Вы хотите пройти через цикл объектов json и хотите, чтобы динамические компоненты встречались?   -  person micronyks    schedule 25.01.2016
comment
Объект json будет каким-то образом проанализирован внутри моего основного ReportComponent (неважно, как я его получу), я имею в виду, что я не знаю, какие дочерние компоненты я буду вставлять заранее.   -  person Diego Castaño Chillarón    schedule 25.01.2016
comment
Если вы говорите, что не знаете, какой дочерний компонент вы будете вставлять, это означает, что вы говорите, что не знаете, как декоратор @component будет определен для каждого компонента. Итак, я думаю, что это не выглядит прямым и простым ответом. Но, надеюсь, вы сможете взглянуть на DynamicComponentLoader из angular2. Но надеюсь, что кто-то еще сможет ответить сейчас или позже.   -  person micronyks    schedule 25.01.2016
comment
Да, похоже, мне придется использовать какую-то фабрику, которая принимает этот json в качестве входных данных и использует DynamicComponentLoader для заполнения представления. Тем не менее, кажется, что универсальный компонент или компонент суперкласса был бы подходящим способом.   -  person Diego Castaño Chillarón    schedule 25.01.2016
comment
Но мне интересно, как бы вы динамически определили декоратор @component для динамической вставки всех компонентов. Более того, вы не знаете, сколько компонентов будет в объекте json. Так довольно неловко на данный момент.   -  person micronyks    schedule 25.01.2016
comment
Думал об использовании DynamicComponentLoader.loadNextToLocation(), поэтому количество компонентов больше не имеет значения.   -  person Diego Castaño Chillarón    schedule 25.01.2016

Ответы (1)


arrow_upward
2
arrow_downward

Для динамической вставки компонентов используйте DynamicComponentLoader.

@Component({
  selector: 'child-component',
  template: 'Child'
})
class ChildComponent {
}
@Component({
  selector: 'my-app',
  template: 'Parent (<child id="child"></child>)'
})
class MyApp {
  constructor(dcl: DynamicComponentLoader, injector: Injector) {
    dcl.loadAsRoot(ChildComponent, '#child', injector);
  }
}
person Günter Zöchbauer    schedule 25.01.2016