在Angular 2中注入动态指令/组件

我是Angular 2的新手，并且认为我会创建一个可扩展的主从细节流程来开始学习。在Angular 2中注入动态指令/组件

'主'部分正在工作，我可以轻松地插入特定的服务，我需要在引导应用程序时填充列表。问题在于使'细节'部分可扩展。

基本上，主从模板在模板下面几行：

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

没有，我可以只加载Detail指令，并用它做，但我想要的是指令/组件是所以我可以插入任何细节指令/组件，而无需将其硬编码到“主细节”组件中。

为了实现这个我试过DynamicComponentLoader：

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

和主detail.component.ts的构造函数：

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

而作为引导的一部分：

provide(BaseDetailComponent, {useValue: SomeSpecificDetailComponent})

好消息是，这个工程，它加载SomeSpecificDetailComponent，并显示温度在需要的地方晚点

但现在我卡住了。 Typescript抱怨说，我似乎无法访问通过<detail [item]='masterItemActive'>传递的项目，我不知道这种模式是否可以找到解决此问题的方法。

所以我的三个问题是：

是在DynamicComponentLoader去解决这个问题的方法是什么？

因为我更愿意provide()一个主 - 细节使用的指令。这似乎是最无痛的方法，但我不知道如何实现这一点。

如何访问SomeSpecificDetailComponent内的item？

我想：

@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'

任何帮助将不胜感激！

更新

我一直错误地使用Type作为一个接口，打字稿编译错误固定用BaseDetailComponent extends Type。

来源

2016-02-27 Frank van Luijn

目前不支持绑定到动态注入的组件或指令。

你可以做的是势在必行数据传递到已创建的组件

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

来源

2016-02-27 15:09:45

好的，谢谢！太糟糕了，它不被支持，这种方法感觉有点ha。。你知道他们是否打算支持它吗？ –

我不知道。我没有看到赞成或反对的任何评论。尽管AFAIK，每个人都想要它。 –

我接受了你的答案，因为它修复了主要问题，即无法引用活动项目。我已经能够自己修复Typescript错误（像往常一样，愚蠢的错误^^）。就这种方法的有效性而言，我想我们只需要等待一些额外的功能被添加。再次感谢！ –

在Angular 2中注入动态指令/组件

回答

相关问题