Question

这不是重复！

所以，基本上，这个问题与这个问题非常密切相关：Angular 2 dynamic tabs with user-click chosen components 而且主要是它的作者。但是有了这个巨大的评论 - 我想要将我的组件渲染到当前的ElementRef，而不是渲染到身体上的自定义元素（或者仅仅是身体上的自定义元素。

我有一些Autocomplete指令的实现，它应该像下面的代码那样将它的列表组件呈现给正文（在RC.5之后重构为使用Compiler而不是ComponentResolver）。这与RC.4（部分使用RC.5）以及使用ApplicationRef的内部方法（或使用直接DOM操作）的一些技巧一起正常工作：

@Directive({
  selector: '[...]'
})
export class AutoCompleteDirective {
  constructor(private appRef:ApplicationRef, private compiler: Compiler, private injector:Injector) {
  }

  render () {
    this.compiler.compileComponentAsync(AutoCompleteTmplComponent)
        .then((factory:ComponentFactory<AutoCompleteTmplComponent>) => {
            let cmpRef:ComponentRef<AutoCompleteTmplComponent> = 
                  factory.create(this.injector, null, `body`);
            // here is the magic coming
            (<any>this.appRef)._loadComponent(cmpRef);
            // OR (which is more ugly): 
            // window.document.body.apeendChild(cmpRef.location.nativeElement);
  }
}

最后，问题 - 自TesBed引入后单元测试失败，我们无法将ApplicationRef显式注入到测试配置中。实验类的内部方法的使用，很快就可以很快删除，看起来不太好并且可扩展（也可以作为直接的DOM操作）。

问题 - 有谁知道更优雅和稳定的解决方案？

带有RC.5的BODY上的Angular2动态组件

0 个答案: