Angular 结构指令：用其他组件包裹宿主元素

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 [=30 定义的模板=] 在 @Component 装饰器上......但是有没有一种方法可以与指令范式一起使用来实现这样的结果？

Answer 1

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

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

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

  ngDoCheck(): void {
    if (this.templateView) {
        this.templateView.detectChanges();
    }
  }
}

您必须将 MyComponent 添加到 @NgModule

的 entryComponents 数组中

完整示例可在 Stackblitz

上找到

另见

Angular 结构指令：用其他组件包裹宿主元素

Angular structural directive: wrap the host element with some another component

angular2-directives

angular