组件html上带有指令的角8问题

Question

我创建了一个使用角8的指令。

指令代码：

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

@Directive({
  selector: '[appDynamic]',
  exportAs: 'dynamicdirective'
})
export class DynamicDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }

}

然后，我将它添加到组件ts文件中：

import { Component, OnInit, ComponentFactoryResolver, ViewChild } from '@angular/core';

@Component({
  selector: 'app-preview',
  templateUrl: './preview.component.html',
  styleUrls: ['./preview.component.scss']
})
export class PreviewComponent implements OnInit {

  @ViewChild('sider', {static: true})
  sider;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {
  }

  ngOnInit() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(PreviewComponent);
    this.sider.viewContainerRef.createComponent(componentFactory);
  }

}

最后，我将代码添加到组件的html中，这是我获得错误的地方：

<ng-template #sider="dynamicdirective" dynamic></ng-template>

上面的代码行给出了以下错误：

There is no directive with "exportAs" set to "dynamicdirective"

我怎么才能解决这个问题？

Answer 1

因为您的选择器是appDynamic，所以需要使用它来设置指令。

<ng-template #sider="dynamicdirective" appDynamic></ng-template>