Question

我正在寻求一些建议，在使用Angular2时我应该如何处理元素。我已经在localstorage中存储了一些元素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

如何为您的每个＆＃34;座位＆＃34;添加自定义指令？元素并让该指令添加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"

组件呈现视图后更新dom，Angular2中的最佳实践？

2 个答案: