angular - 如何从组件访问 "root"ViewContainerRef

Question

我正在创建一个“组件工厂”来帮助我动态创建组件。该工厂用于创建类似的组件； PopOvers、Modals、Overlays 等

它有一个 attach 方法来创建组件:

attach<T>(component: ComponentType<T>, viewContainerRef: ViewContainerRef): ComponentRef<T> {
    let componentFactory =
        this.componentFactoryResolver.resolveComponentFactory(component);
    let ref = viewContainerRef.createComponent(
        componentFactory,
        viewContainerRef.length,
        viewContainerRef.parentInjector);

    return ref;
}

该方法接受我要创建的组件的类型，以及它应该添加到哪个 ViewContainer。

从组件内部调用此方法时，我使用组件 ViewContainer 调用它。这很好用!

但我希望可以选择指定是否应在“根”ViewContainer 中创建新组件，即。 HTML 的主体。

这可能吗？我真的是 Angular2 的新手，所以也许我真的偏离了轨道，应该以其他方式解决这个问题。

Answer 1

您可以实现一些模块，为任何感兴趣的人提供根组件引用。

所以首先创建那个模块，把它放入注入(inject)器。

完成后，需要来自应用程序根目录中的注入(inject)器的模块，即您正在引导的模块并向其注册根组件(恐怕这将是最接近根目录的东西，因为窗口只是没有' t 实现 ElementRef)。

完成后，您可以在任何子组件中注入(inject)该模块，请求根元素引用，并随心所欲地使用它。