Question

我需要动态地将组件加载到可能位于app组件内的任何位置的HTML元素中。

我计划使用TemplateRef作为ViewContainerRef.createEmbeddedView(templateRef)的参数来动态加载我想要的组件。

所以I.E.我希望它看起来像这样

var myViewRef = this.viewContainer.createEmbeddedView(
  getTemplateRefFromNode(document.querySelector('.anySelector'))
);
this.resolver.resolveComponent(myComponent)
  .then(factory => {
    var newComponent = myViewRef.createComponent(factory, 0, myViewRef.injector);
  });

Answer 1

这不是它的工作方式，根本不是。您没有{em}与任何 DOM节点相关联的TemplateRef。 TemplateRef是由<template>元素和<template>元素创建的结构。

很难建议其他提案，因为我不清楚你的意思究竟是什么＆＃34;我需要动态地将组件加载到可能位于我的应用程序组件内的任何位置的HTML元素中。＆＃34;

Answer 2

您是否尝试将组件加载到组件内容中的任意位置？

如果是这样，组件内容中的某个位置会在元素上放置#loadLocation属性，则组件中的此代码会将自定义组件插入该元素中。

@ContentChild('loadLocation',{read: ViewContainerRef}) loadLocation: ViewContainerRef;

constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

ngAfterContentInit() {
  if (!this.loadLocation) {
    return;
  }
  let componentFactory = this.componentFactoryResolver.resolve(myComponent);
  let newComponent = this.loadLocation.createComponent(componentFactory);
}

Angular2从任何HTML元素获取TemplateRef

2 个答案: