角度 4 |如何在点击时动态注入指令？

美好的一天，如何实现在单击按钮时注入自定义指令？

请参阅下面我的代码..

<ng-container *ngFor="let apidata of zoneOne; let i = index">
  <div class="box" *ngIf="(i < 5)" **insert directives here**>
    <div class="box-holder">
      <span id="AssignmentNumber">{{apidata.Assignment}}</span>
    </div>
  </div>
</ng-container>  
<button class="viewMore" (click)="viewMoreClick()">View more..</button>

这只是一个简单的切换事件。我只是很难弄清楚如何做到这一点，因为当我将函数放在每个 div 上时，它都会切换元素。我只想在单击特定 div 时显示 div ..

你能做的是：

<p [appHighlight]="toggleDirective">
  Start editing to see some magic happen :)
</p>

<button (click)='toggleDirective=!toggleDirective'>Toggle</button>

根据 true 和 false，您还可以更改指令的行为。

export class HighlightDirective implements OnChanges {
    @Input('appHighlight') highlightColor: boolean;

    constructor(private el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }

    ngOnChanges(){
      this.el.nativeElement.style.backgroundColor = this.highlightColor ? 'yellow' : '';
    }
}

工作演示 https://stackblitz.com/edit/angular-dynamic-directive