Angular结构指令：使用另一个组件包装host元素

Question

我有最简单的Angular结构指令：

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[hello]' })
export class HelloDirective {
  constructor(
    private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {
      this.viewContainer.createEmbeddedView(this.templateRef);
  }
}

我用这种方式：

<div *hello>Hello Directive</div>

它按预期显示“Hello Directive”消息。现在我想通过用另一个组件包装来更改内容：

<my-component>Hello Directive</my-component>

我希望该指令能够为我做到这一点。我知道我可以使用Component范例并创建HelloComponent而不是HelloDirective并使用ng-template等与template装饰器上的templateUrl或@Component属性定义的模板...但是有没有一种方法可以与指令范例一起使用来实现这样的结果？

Answer 1

您可以动态创建组件并将可投影节点传递给它。所以它看起来像

@Directive({ selector: '[hello]' })
export class HelloDirective {
  constructor(
      private templateRef: TemplateRef<any>,
      private viewContainer: ViewContainerRef,
      private resolver: ComponentFactoryResolver) {
  }

  ngOnInit() {
    const templateView = this.templateRef.createEmbeddedView({});
    const compFactory = this.resolver.resolveComponentFactory(MyComponent);
    this.viewContainer.createComponent(
      compFactory, null, this.viewContainer.injector, [templateView.rootNodes])
  }
}

你必须将MyComponent添加到entryComponents的@NgModule数组中

完整的例子可以在Stackblitz找到

也可以看看

• Creating a angular2 component with ng-content dynamically