Dynamic 带RC.5的车身上的Angular2动态部件

这不是重复

因此，基本上，这个问题与这个问题密切相关： 而且主要是它的作者。但是有一个巨大的注释-我不想将我的组件呈现给当前的ElementRef，而是呈现给主体上的自定义元素（或者仅仅是主体）

我有一些Autocomplete指令的实现，它应该将它的列表组件呈现到正文中，如下面的代码所示（经过重构，在RC.5之后使用编译器而不是ComponentResolver）。这在RC.4（部分是RC.5）中很好地工作，使用了ApplicationRef的内部方法（或使用直接DOM操作）:

@指令({
选择器：“[…]”
})
导出类AutoCompletedDirective{
构造函数（私有appRef:ApplicationRef，私有编译器：编译器，私有注入器：注入器）{
}
渲染（）{
this.compiler.compileComponentAsync（AutoCompleteTmpleComponent）
.然后（（工厂：组件工厂）=>{
设cmpRef:ComponentRef=
create（this.injector，null，`body`）；
//魔术来了
（本附录）加载组件（cmpRef）；
//或者（哪个更难看）：
//window.document.body.apeendChild（cmpRef.location.nativeElement）；
}
}

最后，问题-单元测试现在失败了，因为引入了

TesBed

，我们无法显式地将ApplicationRef注入到测试配置中。此外，实验类的内部方法的使用（很可能很快就会被删除）看起来不好，也不可扩展（也作为直接的DOM操作）

---

问题-有人知道更优雅、更稳定的解决方案吗？

如果你向元素中添加一个组件，它的所有内容都会被清除。我很确定这不是你希望在

元素中发生的事情。我不同意。当我们使用ViewContainerRef呈现动态组件时，它只是将html添加到e组件的ElementRef.nativeElement的结尾。不清除。与“body”（或另一个选择器，让它成为“.some class”-相同的行为）相同，但问题是，ComponentFactory的“create”方法的这个实现并没有呈现它。。我同意

ViewContainerRef

就是这样。我还没有尝试使用字符串选择器，但如果它用于创建根组件（如

DynamicComponentLoader.loadAsRoot

was），然后它将按我提到的方式工作。您尝试过

以外的其他元素吗？当然，我有一个特殊的div用于使用自定义类呈现此组件。我将它作为

创建

方法的第三个参数提供，如下所示：

工厂.create（this.injector，null，'.custom class'））

看起来Angular团队没有100%实现它，因为

this.viewContainerRef.createComponent（）

在调用ComponentFactory的创建方法后有很多操作。.以下是来源：我明白了。.是的，我同意，这是另一种实现方式，但并不一定比其他方式“更好”）无论如何，谢谢你！我会尝试一切，并得出我自己的结论）如果您将组件添加到元素中，它的所有内容都将被清除。我很确定这不是您希望在

元素中发生的事情。我不同意。当我们使用ViewContainerRef来呈现动态组件时，它只是将html添加到组件的ElementRef.nativeElement的末尾。没有清除。与“body”相同（或者另一个选择器，让它成为“.some class”-相同的行为），但问题是，ComponentFactory的“create”方法的这个实现并没有呈现它。.我同意

ViewContainerRef

就是这种情况。我没有尝试使用字符串选择器，但如果它用于创建根组件（如

DynamicComponentLoader.loadAsRoot

was），然后它将按照我提到的方式工作。您尝试过

以外的其他元素吗？当然，我有一个特殊的div用于使用自定义类呈现此组件。我将它作为

创建

方法的第三个参数提供，如下所示：

工厂.create（this.injector，null，'.custom class'）

看起来Angular团队没有100%实现它，因为

this.viewContainerRef.createComponent（）

在调用ComponentFactory的创建方法后有很多操作。以下是源代码：我明白了。是的，我同意，这是另一种实现方法，但并不一定比其他方法“更好”）总之-谢谢！我会尝试所有方法并得出我自己的结论）

@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);
  }
}