Angular 4 |单击时如何动态注入指令？

Question

你好，如何实现在点击按钮时注入自定义指令？

查看下面我的代码..

<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..

Answer 1

您可以做的是：

<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' : '';
    }
}

WORKING DEMO

Angular 4 |单击时如何动态注入指令？

Angular 4 | How to dynamically inject a directive when click?

angular

directive