Question

我有一个共享的HTML

 <inventory-products-list *ngIf="toggle" [products]="products" (qrCode)="generateQRCode($event)" (undeleted)="undelete($event)" (deleted)="deleteProduct($event)"></inventory-products-list>

这个我需要在不同的页面中使用。组件将根据切换属性（如网格视图和列表视图）切换视图。

我想使用一个服务并使用map方法，比如getmap（），set map（）（不知道具体使用方法）而不是切换属性，我需要创建一些保持切换值的属性。

例如，我在视图中将值设置为true，然后我重定向到任何页面并返回到当前页面，不应将true重置为false。它应该保持我选择的视图。

如果我只是在服务中使用一个简单的变量，因为我在不同的页面中使用共享的HTML。如果我在一个地方改变它也将改变其他页面中的视图。我的服务是

     import { Injectable } from '@angular/core';
     import { Client } from '../../inventory/setting/client';

     @Injectable()

     export class UIService {
   public client?: Client;
   public isFullWidth?: boolean = false;
      public data?: boolean;
  constructor() {
            }
      myMap = new Map();



     public setData(key, data) {
       console.log("here");
       this.myMap.set(key, data);
                               }

        public getData(key) {
        return this.myMap.get(key);
      }

      }

在我正在做的组件中

  changeView() {
this.toggle = !this.toggle;
this.uiService.setData("category",this.toggle);
console.log(this.uiService.getData("category"));
}

ngOnInit(): void {
console.log("on",this.uiService.getData("category"));
this.getCategories();
}

但是当我们更改页面并返回时它没有保留键值。我做错了什么？

Answer 1

将组件值保留在服务中的想法很好。您可以将值存储在Map中，而不是所有实例共享的单个值。因此，使用该组件的每个视图在地图中都有自己的密钥和自己的数据。作为密钥，您可以使用当前路由，也可以为每种用途创建一些唯一的名称。

编辑：示例查看Map class doc。

class MyService {
  private componentDataMap = new Map();

  public setData(key, data) {
    this.componentDataMap.set(key, data);
  }

  public getData(key) {
    return this.componentDataMap.get(key);
  }
}

如果您不能使用Map类，则可以使用通用对象：

var objectAsMap = {};
objectAsMap[key] = values;
var data = objectAsMap[key];

如何使用map来设置并使用服务获取价值？

1 个答案: