javascript - 组件渲染 View 后更新 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 钩子(Hook)，它在创建 View 后多次触发。有什么办法可以让它只触发一次吗？

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

除了使用这个钩子(Hook)之外，我似乎找不到 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 实例。您不想在每个实例中重新获取选定的席位(该服务允许您缓存席位并返回相同的数据)。