我需要在浏览器的会话中存储数据并检索数据,直到会话退出.如何在Angular 2中使用本地和会话存储？
我在下面的代码片段中有以下列表项.在鼠标单击时,我想选择该项目(添加'active'类并取消选择remove'active class选择的任何其他项目(兄弟姐妹).我已经使用jQuery实现了相同(完整代码如下).我如何实现Angular 2方式的功能.
代码段:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="grouplist" class="list-group">
<li class="list-group-item">Item1</li>
<li class="list-group-item">Item2</li>
<li class="list-group-item">Item3</li>
<li class="list-group-item">Item4</li>
<li class="list-group-item">Item5</li>
<li class="list-group-item">Item6</li>
<li class="list-group-item">Item7</li>
<li class="list-group-item">Item8</li>
<li class="list-group-item">Item9</li>
<li class="list-group-item">Item10</li>
</ul>
<script>
$(function () {
$('.list-group li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
});
})
</script>
</body>
</html>
JSFiddle 在这里
Angular 2实验:我可以通过'setElementClass'设置类.如何从兄弟姐妹中删除"活跃"课程？或者还有其他方法吗？
列表视图组件(test1.component.html):
<h2>Select List Item</h2>
<ul id="grouplist" class="list-group">
<li class="list-group-item" (click)="listClick($event)" *ngFor="let item of groups">
{{ item.name }}
</li>
</ul>
TypeScript代码(test1.component.ts):
import { …