Инъекция динамической директивы/компонента в Angular 2

Question

Я новичок в Angular 2 и думал, что сделаю расширяемый поток детализации, чтобы начать обучение.

«Мастер-часть» работает, я могу легко подключить определенную услугу, необходимую для заполнения списка при загрузке приложения. Проблема заключается в том, что «детализация детали» расширяема.

В принципе, шаблон мастер-деталь имеет следующие строки в шаблоне:

<div class="large-10 columns"> 
    <detail [item]="masterItemActive" id="detail"></detail> 
</div> 

Нет, я мог бы просто загрузить Detail директиву и сделать с ней, но я хочу, что директива/компонент будет поэтому я мог бы подключить любую директиву/компонент, которые мне нравятся, без жесткого кодирования в компонент «master-detail».

Для того, чтобы достичь этого я попытался DynamicComponentLoader:

dcl.loadAsRoot(detailComponent, '#detail', injector); 

И конструктор мастер-detail.component.ts:

constructor(
    dcl:DynamicComponentLoader, 
    injector: Injector, 
    elementRef:ElementRef, 
    detailComponent:BaseDetailComponent 

И как часть начальной загрузки:

provide(BaseDetailComponent, {useValue: SomeSpecificDetailComponent}) 

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

Но теперь я застрял. Typcript жалуется, я не могу получить доступ к элементу, переданному через <detail [item]='masterItemActive'>, и я понятия не имею, является ли этот шаблон способом поиска решения этой проблемы.

Так что мои три вопроса:

ли DynamicComponentLoader путь решить эту проблему?

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

Как я могу получить доступ к item внутри SomeSpecificDetailComponent?

Я пробовал:

@Injectable() 
export class SomeSpecificDetailComponent extends BaseDetailComponent { 
    @Input() 
    item:BaseMasterItem; // always empty (and yes, masterItemActive is being set) 
} 

И как я могу предотвратить машинописный жаловаться?

Поскольку первый аргумент dcl.loadAsRoot() должен быть типа «Тип», которого нет.

Argument of type 'BaseDetailComponent' is not assignable to parameter of type 'Type' 

Любая помощь была бы высоко оценена!

Update

Я неправильно используя Type в качестве интерфейса, ошибка машинописный сборник был зафиксирован с помощью BaseDetailComponent extends Type.

Answer 1

В настоящее время привязка к компонентам или директивам с динамическим впрыском не поддерживается.

Что вы можете сделать, это передать данные императивно созданному компоненту

dcl.loadAsRoot(detailComponent, '#detail', injector) 
.then(componentRef => componentRef.instance.item = this.masterItemActive);