Angular ngFor中的组件-如何让服务获取确切的元素？

我有一个服务正在为*ngFor=let chart of charts | async | daysFilter:7中的每个图表调用this.lineChartService.makeGraph。在服务中，它不记录.querySelector'.graph sheet'。问题是，服务没有以1:1的封装方式应用于图表，它将获取文档中的第一个图形

我从angular 1指令中打破了这一点，该指令没有任何问题。。。查询选择器通过抓取它在指令中所属的图表，始终按预期工作

如何在角5组件中使用相同的逻辑？queryselector将在何处以隔离作用域的方式获取应用它的组件

last-seven-days.component.html

<div class="last-seven-days view" 
  *ngFor="let chart of charts | async | daysFilter: 7">
  <app-line-chart
    graphSize="med"
    [curveData]="chart"></app-line-chart>
</div>

---

您必须获取视图的引用并将其传递给服务，后者将使用服务而不是文档，如下所示：

@Component({
  selector: 'app-line-chart',
  template: '<div class="graph-sheet center"></div>',
  styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent {
  @Input() graphSize: String;
  @Input() curveData: Array<object>;

  constructor(
    private elementRef: ElementRef
    private lineChartService: LineChartService,
  ) { }

  ngOnInit() {
    this.lineChartService.makeGraph(
      this.graphSize,
      this.curveData,
      this.elementRef.nativeElement
    );
  }
}

只需确保在组件具有initialisedngOnInit之前，您没有尝试选择任何内容，而在指定的示例中，您没有这样做，但仍然没有选择

注:

---

如果服务是通过组件本身而不是某些任意模块提供给组件的，那么服务也会引用组件所引用的相同元素ref。

这可以用Render2替代，还是用数据绑定？我阅读了关于elementRefIt的警告表单，它可以使用Render2完成，但这仅仅是因为您也可以使用Render2访问DOM。所以基本上是一样的。您阅读的警告是关于访问DOM的，但这是您正在执行的操作的解决方案。你所做的是对还是错取决于你在服务中所做的。如果你能提供更多关于这项服务的细节，我可以帮你。

...
const divEl = document.querySelector('.graph-sheet')

@Component({
  selector: 'app-line-chart',
  template: '<div class="graph-sheet center"></div>',
  styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent {
  @Input() graphSize: String;
  @Input() curveData: Array<object>;

  constructor(
    private elementRef: ElementRef
    private lineChartService: LineChartService,
  ) { }

  ngOnInit() {
    this.lineChartService.makeGraph(
      this.graphSize,
      this.curveData,
      this.elementRef.nativeElement
    );
  }
}

const divEl = nativeELement.querySelector('.graph-sheet')