Question

指令：

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

@Directive({
  selector: '[appMousehover]',
  host: {
    '(mouseenter)': 'show()',
    '(mouseleave)': 'hide()',
  }
})
export class MousehoverDirective {

  constructor(private el: ElementRef) { }
  show() {
    console.log('show')
    this.ishovering = true;
  }

  hide() {
    console.log('hide')
    this.ishovering = false;
  }

  @HostBinding('class.card-outline-primary') private ishovering: boolean;
}

要添加动态指令，请使用D3服务

import { Component, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';

import {
  D3Service,
  D3,ZoomBehavior,
  Selection
} from 'd3-ng2-service';

@Component({
  selector: 'app-zoom',
  templateUrl: './zoom.component.html',
  styleUrls: ['./zoom.component.css']
})
export class ZoomComponent implements OnInit, OnDestroy {
  private d3: D3;
  private zoom: D3;
  private parentNativeElement: any;
  private d3Svg: Selection<SVGSVGElement, any, null, undefined>;
  dateset = ['20','40','60']

  constructor(element: ElementRef, private ngZone: NgZone, d3Service: D3Service) {
    this.d3 = d3Service.getD3();
    this.zoom = d3Service.getD3();
    this.parentNativeElement = element.nativeElement;
  }

  ngOnDestroy() {
    if (this.d3Svg.empty && !this.d3Svg.empty()) {
      this.d3Svg.selectAll('*').remove();
    }
  }

  ngOnInit() {
    let d3 = this.d3.select('svg')
    let zoom = this.zoom.zoom();

    zoom.scaleExtent([0.3,2]).on('zoom',zoomed)
    var gapp = d3.append("g").call(zoom)

    gapp.selectAll('circle')
    .data(this.dateset)
    .enter()
    .append('circle')
    .attr('appMousehover','')
    .attr('cx',(d)=>d)
    .attr('cy','10')
    .attr('r', '10')
    .attr('value', (d3,i)=>{return i})


    function zoomed() {
      console.log(this)

    }

  }
}

如果直接使用类似标签或其他标签，则可以正常使用。只有当我尝试动态渲染时，问题才出现。

为什么指令不起作用？或在附加所有元素后如何重新编译指令？希望有人能对此有所帮助，在这里卡住了很多。

动态附加指令在Angular 5中不起作用？

0 个答案: