如何在 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)
  }