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>

我希望该指令能为我做到这一点。我知道我可以使用组件范例并创建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

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

1 个答案: