要动态添加指令，可以使用以下步骤：

1. 首先，创建一个指令，该指令将在运行时动态添加到元素上。可以使用Angular CLI生成指令，使用以下命令：

   ng generate directive dynamicDirective
   

2. 在生成的dynamic-directive.directive.ts文件中，添加所需的逻辑。以下是一个示例，该指令将在元素上添加一个红色的背景颜色：

   import { Directive, ElementRef, Renderer2 } from '@angular/core';
   
   @Directive({
     selector: '[appDynamicDirective]'
   })
   export class DynamicDirective {
     constructor(private el: ElementRef, private renderer: Renderer2) {
       this.renderer.setStyle(this.el.nativeElement, 'background-color', 'red');
     }
   }
   

3. 在需要动态添加指令的组件中，将DynamicDirective添加到@NgModule装饰器的declarations数组中。

4. 在组件类中，使用Renderer2和ComponentFactoryResolver来动态创建组件并将指令添加到元素上。以下是一个示例：

   import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
   import { DynamicDirective } from './dynamic-directive.directive';
   
   @Component({
     selector: 'app-root',
     template: `
       
   
     `
   })
   export class AppComponent {
     @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
   
     constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
   
     addDynamicDirective() {
       const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicDirective);
       const componentRef = this.container.createComponent(componentFactory);
       // 可以通过componentRef实例来访问添加指令后的组件实例的属性和方法
     }
   }
   

5. 在模板中，通过调用addDynamicDirective()方法来触发动态添加指令的逻辑。

   添加指令
   

这样，当用户点击“添加指令”按钮时，指令将被动态添加到容器元素中。