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 |单击时如何动态注入指令？

1 个答案: