将模板内的点击事件与普通javascript绑定为angular2中的值

Question

在这个模板中，在第一个li元素中，我想绑定（单击）事件以在localStorage中存储一些值。我没有收到任何错误，但它没有工作。我试图使用localStorage.getItem('someStatus')访问其他组件中的'someStatus'，但是我没有获得点击的存储值。请建议我正确的方法。谢谢。

import { Component, OnInit } from "@angular/core";
import { Router, ActivatedRoute, NavigationEnd, Params, PRIMARY_OUTLET } from "@angular/router";
@Component({
selector: 'breadcrumb',
template: `<div id="crumbs">
<ul>
    <li routerLinkActive="active" (click)="localStorage.setItem('someStatus',false)"><a routerLink="/page1">Option 1</a></li>
    <li routerLinkActive="active"><a routerLink="/page2" title="Summary">Option 2</a></li> 
</ul>
</div>`
})
export class BreadcrumbComponent implements OnInit {constructor(  ) {  }  ngOnInit() {  }}

Answer 1

如Angular documentation中所述，您无法访问模板中的全局方法和对象（如localStorage）：

模板表达式不能引用全局命名空间中的任何内容（undefined除外）。他们不能参考窗口或文档。他们无法调用console.log或Math.max。它们仅限于引用表达式上下文的成员。

---

您可以将代码放在组件的方法中：

public resetSomeStatus(): void {
    localStorage.setItem('someStatus', false);
}

并在您的点击事件中调用该方法：

<li routerLinkActive="active" (click)="resetSomeStatus()">