angle2の値としてplain javascriptをテンプレート内でクリックするイベント

Question

このテンプレートでは、最初のli要素で、イベントをバインド（クリック）してlocalStorageに値を格納したいとします。私は何のエラーも起こっていませんが、動作していません。私はlocalStorage.getItem('someStatus')を使用していくつかの他のコンポーネントでこの 'someStatus'にアクセスしようとしていますが、Iamはクリック時に保存された値を取得しません。正しいアプローチを提案してください。ありがとうございました。

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のような）グローバルメソッドとオブジェクトへのアクセスを持っていない：

を

テンプレート式はグローバル名前空間 に何を参照することはできません（未定義を除く）。窓や文書を参照することはできません。彼らは をconsole.logまたはMath.maxと呼ぶことはできません。これらは、式コンテキストのメンバーである の参照に限定されています。

---

あなたは、コンポーネントのメソッドにコードを置くことができます：

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

とあなたのクリックイベントでそのメソッドを呼び出します。

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