Я пытаюсь добиться чего-то вроде этого: У меня есть класс модели ObjectTypeA, ObjectTypeB и ObjectTypeC. Существует также завод ComponentFactory, который основан на типе объекта, переданного в будет создавать различные компоненты:Динамический шаблон «transclusion» в Angular2

ComponentFactory.ts

export interface ComponentFactoryInterface { 

    static CreateComponent(obj: CommonSuperObject) 

} 

@Injectable() 
export class ComponentFactory { 

    public static CreateComponent(obj: CommonSuperObject){ 

     if (obj instanceof ObjectTypeA){ 
      return ObjectComponentA() 
     }else if (obj instanceof ObjectTypeB){ 
      return ObjectComponentB() 
     } 

    } 
}

В шаблоне я хотел бы сделать что-то вроде этого:

main_template.html

<components> 
    <component *ngFor="#obj in objects"> 
    <!-- insert custom component template here --> 
    </component> 
</components>

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

я мог бы сделать что-то вроде этого (не мой предпочтительный способ сделать это):

<components> 
    <!-- loop over component models --> 
    <custom-component-a *ngIf="models[i] instanceof ObjectTypeA"> 
    </custom-component-a> 
    <custom-component-b *ngIf="models[i] instanceof ObjectTypeB"> 
    </custom-component-b> 
</components>

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

Edit - Рабочий пример

constructor(private _contentService: ContentService, private _dcl: DynamicComponentLoader, componentFactory: ComponentFactory, elementRef: ElementRef){ 

    this.someArray = _contentService.someArrayData; 
    this.someArray.forEach(compData => { 
    let component = componentFactory.createComponent(compData); 
     _dcl.loadIntoLocation(component, elementRef, 'componentContainer').then(function(el){ 
      el.instance.compData = compData; 
     }); 
    }); 

}

источник

2015-12-24 the_critic

обновление

DCL является устаревшим, так как некоторое время. Вместо этого используйте ViewContainerRef.createComponent. Для примера (с Plunker) см Angular 2 dynamic tabs with user-click chosen components

оригинальный

Вы можете использовать ngSwitch (похожий на ваш собственный обходной путь, но более кратким) или DynamicComponentLoader

Смотрите также

источник

2015-12-24 20:54:53

'ngSwitch' не является вариантом,' DynamicComponentLoader' звучит скорее как то, что я ищу. Я посмотрю на это и вернусь к вам. –

Фу! Почти там мне нужно только установить свойство на вновь созданный компонент. Я получаю обещание с помощью «ComponentRef», но я не уверен, как получить доступ к свойствам недавно загруженного компонента ... Любая идея? (Обновлен мой вопрос для вас, чтобы увидеть, с чем я работаю) –

Хорошо, я думаю, что экземпляр компонента будет 'el.instance'. Попробуйте это и вернемся к вам в ближайшее время. –

Динамический шаблон «transclusion» в Angular2

Edit - Рабочий пример

ответ

Смежные вопросы