单击时从angular组件实例化angular自定义指令

<button (click)="instantiateDirective()">点击实例化指令</button>

import { Component, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { CustomDirective } from './custom.directive';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="instantiateDirective()">点击实例化指令</button>
    <ng-template #directiveContainer></ng-template>
  `
})
export class MyComponent {
  constructor(private componentFactoryResolver: ComponentFactoryResolver, private viewContainerRef: ViewContainerRef) {}

  instantiateDirective() {
    const directiveFactory = this.componentFactoryResolver.resolveComponentFactory(CustomDirective);
    const directiveRef = this.viewContainerRef.createComponent(directiveFactory);
    // 可以对指令实例进行进一步操作，例如设置属性或调用方法
  }
}

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

@Directive({
  selector: '[appCustomDirective]'
})
export class CustomDirective {
  constructor(private elementRef: ElementRef) {
    // 可以在构造函数中对指令所在的元素进行操作
  }
  
  // 可以在指令中定义其他方法和属性，以实现特定的功能
}