如何在 Angular 2 模板中獲取 localStorage 值

Question

這是我的代碼，

HTML：

<div *ngFor="let comment of comments | orderBy: '-'+orderBy">
    <div class="comment-item">
        <div class="row">
            <div class="col-md-8">
                {{comment.userName}}
            </div>
            <div class="col-md-4">
                <div class="comment-timeago">
                    {{comment.time | timeAgo}}
                </div>
                <div class="likedicon">
                    <i class="fa fa-heart-o disliked" aria-hidden="true" (click)="likeComment(comment._id, comment)"></i>
                    <i class="fa fa-heart liked" aria-hidden="true" *ngIf="comment.liked == 'liked'" (click)="dislikeComment(comment._id, comment)"></i>
                </div>
                <div class="like-num">
                    {{comment.like}}
                </div>
            </div>
        </div>
    </div>
</div>

文件component.ts：

likeComment(commentId, comment) {

    localStorage[commentId] = "liked";
    comment.liked = localStorage[commentId];
    comment.like ++;
    this.dataService.likeComment(commentId).subscribe(
        // Post data to server
        error => console.log(error)
    )
}

dislikeComment(commentId, comment) {
    localStorage[commentId] = "disliked";
    comment.liked = localStorage[commentId];
    comment.like --;
    this.dataService.dislikeComment(commentId).subscribe(
        // Post data to server
        error => console.log(error)
    )

每條評論都可以獨立切換喜歡或不喜歡，但我必須使用 localStorage 來決定應該顯示什么狀態。 也許像：

*ngIf="localStorage.getItem(comment._Id) == 'liked'"

不幸的是，這是錯誤的語法。 我發現 getter 正在處理我的另一個案例，參考來自Angular2 How to display localStorage value inside HTML5 template? .

在這種情況下，我不知道這樣做，因為我不能在我的函數中使用 get commentLike()，也不能使用全局變量。 我該如何解決？

Answer 1

當您嘗試使用*ngIf="localStorage.getItem(comment._Id) == 'liked'"它會嘗試在 component.ts 中找到 this.localStorage，但它不存在，因此會引發錯誤.. . 像 localStorage 這樣的東西在任何需要的地方都很常見，所以把它保存在 global.ts 中，可以很容易地訪問......

在您的global.ts ，添加如下函數：

export class GlobalApp {

constructor() {}

public localStorageItem(id: string): string {
    return localStorage.getItem(id);
}

現在更新你的component.ts ：

import {GlobalApp} from '../helpers';

export class MyComponent {

constructor (public app: GlobalApp)  {
  }
}

現在它已經准備好在任何模板中輕松使用，因為我們有一個全局聲明的函數：

*ngIf="app.localStorageItem(comment._Id) == 'liked'"

Answer 2

這不是像localStorage[commentId]這樣使用 localStorage 的正確方法。 你應該在這里檢查： Window.localStorage 。

您應該使用 setItem 和 getItem。

對於您的情況，我建議您使用模塊marcj/angular2-localstorage 。

在組件中：

@LocalStorage() public comments:any = [];

在您的模板中：

*ngIf="comments[index]._id == 'liked'"

Answer 3

@Component({
 selector:'app-any',
 templates:`<div *ngIf="localStorageAlice.getItem('key')">...</div>`
})
export class MyComponent {

 localStorageAlice = localStorage; 
 // to access localStorage in html use localStorageAlice.getItem('key');
}

Answer 4

或者你可以像這樣使用

在您的組件中：

*ngIf="getItem(comment._Id) == 'liked'"

在您的模板中：

getItem ( item ) { 
       return localStorage.getItem(item)
  }