Javascript 组件渲染视图后更新dom，Angular2的最佳实践？

我正在寻求一些建议，在使用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属性时，是否有更好的方法获取元素

除了用这个钩子，我似乎找不到有角度的方法

---

有什么想法吗？另外，请不要发布Jquery帖子，因为我不想在使用Angular时实现这一点：）

Angular way有很好的文档，类是使用以下语法切换的：

[class.selected]=“selected”

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

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

...

您需要将一些信息传递给指令，以确定它正在处理哪个座椅。直接传递id（例如，

seat.id

）似乎比依赖HTML id更好（尽管在您的情况下，它们可能是一个相同的id）

现在，指令的代码如下所示：

@指令({
选择器：“[突出显示]”
})
导出类highlight指令{
@Input（）突出显示：string；//这将包含一个seat.id
建造商（el:ElementRef，ss:SeatService）{
const selectedSeats=ss.getSelectedSeats（）；
//如果在selectedSeats中找到当前座位，请将其标记为selected。
if（selectedSeats.indexOf（this.highlight）！=-1）{
this.el.nativeElement.classList.add（'selected'）；
}
}
}

---

我使用外部服务

SeatService

从localStorage获取数据的原因是Angular将为模板中找到的每个匹配项创建一个

HighlightDirective

实例。您不希望在每个实例中重新蚀刻选定的座位（该服务允许您缓存座位并返回相同的数据）。

Ye，但我得到了NgFor生成的50个元素，希望在您再次访问组件时突出显示已单击的元素。因此，我们必须再次找到元素。这就是我将id存储在localstorage中的原因。您应该将

selected

属性添加到您的模型中，这样我就应该在我的模型上创建一个属性，并将其设置为true（如果已选中）。但是，如果用户刷新页面呢？然后将创建一个新实例，对吗？我尝试实现类似的东西。当我的指令起作用时将报告。你说的“刷新页面”是什么意思？如果您指的是硬刷新（浏览器刷新按钮），那么整个应用程序都必须重新启动。在这种情况下，选择哪种实现并不重要。是的，我明白了，我们仍然使用localstorage:）得到了指令并从localstorage检索selectedSeat（如果存在）。现在我只需要一些逻辑上的地方。设法让它与您的伟大的想法，谢谢您的帮助工作