在组件渲染视图后更新dom，这是Angular2的最佳实践吗？

Question

我正在寻求一些建议，以便在使用Angular2时应如何处理元素。 我已经在本地存储中存储了一些元素ID，并希望在某些特定元素上设置选定的类名。

现在，我正在使用这种方式：

ngAfterViewChecked() {

// Check if seats has been selected before
var selectedSeats: elementInterface = JSON.parse(localStorage.getItem('SelectedSeats'));

if (selectedSeats != null) {
  var outboundElement = document.getElementById(selectedSeats.outboundSelectedElement);
  var returnElement = document.getElementById(selectedSeats.returnSelectedElement);

  this.autoSelectSeats(outboundElement);
  this.autoSelectSeats(returnElement);
}

}

方法：

private autoSelectSeats(element: Element) {
    // Set selected class on element
    element.classList.add('selected');
}

我在这里看到两个问题。 第一个是ngAfterViewChecked挂钩，该挂钩在创建视图后会触发多次。 有什么我可以做的，所以只能发射一次吗？

第二：当您知道id并在内容加载后对其设置class属性时，是否有更好的方法来获取该元素？

除了使用此钩子，我似乎找不到Angular2的实现方式。

任何想法？ 另外，请不要发布Jquery帖子，因为我不想在使用Angular时实现它：)

Answer 1

如何向每个“ seat”元素添加自定义指令，然后让该指令添加CSS类？

在您的模板中 ，该指令将按以下方式使用（我猜，因为您没有显示模板）：

<div *ngFor="let seat of seats" [highlight]="seat.id">
  ...
</div>

您需要将一些信息传递给指令以标识其正在使用的座位。 直接传递一个ID（例如seat.id ）似乎比依赖HTML ID更好（尽管在您的情况下，它们可能是相同的）。

现在，该指令的代码：

@Directive({
  selector: '[highlight]'
})
export class HighlightDirective {
  @Input() highlight: string;  // This will contain a seat.id

  constructor(el: ElementRef, ss: SeatService) {
    const selectedSeats = ss.getSelectedSeats();
    // If current seat found in selectedSeats, mark it as selected.
    if (selectedSeats.indexOf(this.highlight) !== -1) {
      this.el.nativeElement.classList.add('selected');
    }
  }
}

我使用外部服务SeatService从localStorage获取数据的原因是，Angular会为它在模板中找到的每个匹配项创建一个HighlightDirective实例。 您不想在每个实例中都重新获取选定的座位（该服务可让您缓存座位并返回相同的数据）。

Answer 2

Angular方式有很好的文档，使用以下语法切换类： [class.selected]="selected"