Question

我正在尝试使用Angular 5中的指令在元素上创建饼图。我创建了如下指令：

@Directive({
  selector: '[pieChart]'
})
export class PieChartDirective implements AfterViewInit {

  @Input() pieChart: any;
  @Input() pieChartElementId: string;
  @Input() pieChartData: any;

  constructor(elem: ElementRef, renderer: Renderer2) {}

  ngAfterViewInit() {
    this.generatePieChart(this.pieChartElementId);
  }

  generatePieChart(elemId) {
    var values = [1, 2, 3];

    $('#' + elemId).sparkline(values, {
      type: "pie",

      tooltipFormat: '{{offset:offset}} ({{percent.1}}%)',
      tooltipValueLookups: {
        'offset': {
          0: 'First',
          1: 'Second',
          2: 'Third'
        }
      },
    });
  }
}

在模板中，我像这样调用指令：

<div class="pieChartDiv" [attr.id]="'classroom.field1' + '_'+ i" [pieChart]="'classroom.field1' + '_'+ i" [pieChartElementId]="'classroom.field1' + '_'+ i"></div>

我正在动态创建id，并希望在每个ID上绘制饼图。但不幸的是，在指令文件中使用console.log($("#"+this.pieChartElementId).length)时，指令中元素的长度没有得到满足。由于该图表无法工作，因为它们没有获取元素。谁能告诉我为什么会这样。预先感谢。

Answer 1

您不应在Angular中使用JQuery＃（）选择器：如您所见，即使在视图初始化之后，您的pieChartElementId元素可能尚未呈现。

相反，您应该使用elementRef或@ViewChild：

如果pieChartElementId是应用pieChart指令的元素，则应使用：

elementRef.nativeElement
如果要选择其他元素，则要复杂一些。您必须使用@ViewChild来获取元素：

@ViewChild('pieChartElement') pieChartElement;

然后将其传递给指令输入：

<div pieChart [externalElement]="pieChartElement"> Element with directive </div> <p #pieChartElement> External element </p>

查看此working example

Angular-在指令中找不到HTML元素

1 个答案: