Question

通常，您希望根据用户的选择使用不同的值集。例如，根据所选语言，使用不同的方式说同一件事，或者根据所选主题，使用相同类型的不同颜色。我正在尝试尝试后者，因此我制作了几个具有相同键但值不同的JSON文件。这是“ green_theme” JSON：

{
  "darker_color": "#1a3300",
  "lighter_color": "#4f9900",
  "error_color": "#b42805"
}

现在我希望组件从注入的服务中获取所需的颜色代码，如下所示：

<div [style.color]="themeService.getColorCodeByKey('darker_color')">example</div>

这是我尝试实施该服务的方式：

@Injectable()
export class ThemeService {
    private readonly RED_SKIN_SOURCE = "assets/themes/red_skin.json"
    private readonly GREEN_SKIN_SOURCE = "assets/themes/green_skin.json" 
    private readonly YELLOW_SKIN_SOURCE = "assets/themes/green_skin.json"
    public skinData: {[key: string]: string} = {};

constructor(private http:Http) {
    this.setSkin(ThemeService.Skin.Green);
}

getColorCodeByKey(key: string): string {
    return this.skinData[key];
}

public setSkin(skin: ThemeService.Skin) {
    let observable: Observable<Response>;
    switch(skin) {
        case ThemeService.Skin.Red: {
            observable =  this.http.get(this.RED_SKIN_SOURCE);
            break;
        }
        case ThemeService.Skin.Yellow: {
            observable =  this.http.get(this.YELLOW_SKIN_SOURCE);
            break;
        }
        case ThemeService.Skin.Green: {
            observable =  this.http.get(this.GREEN_SKIN_SOURCE);
            break;
        }
    }

    observable.map((res: Response) => res.json().forEach(element => {
        this.skinData[element.key] = element;
    }));
  }
}
export namespace ThemeService {
    export enum Skin {
        Red, 
        Green,
        Yellow
    }
}

但是似乎setSkin方法使skinData空了吗？如何正确做到这一点？我是否太早映射了Observable？还是这不是.json()的工作方式？

另外，如果您有一个更好的主意，如何实现此类似键值的服务，我不反对放弃JSON。我什至在考虑以自己的格式和自己的方式实现它。解析器

Answer 1

要修复当前的解决方案，您需要订阅可观察的内容：

observable.subscribe((res: any) => { this.skinData = res; });

Angular中的HttpClient默认情况下解析对json的响应（与fetch不同），并将返回解析后的skinData，您可以立即使用它。

Answer 2

我喜欢您将数据存储在json中的方式，但是您无需创建用于不同颜色的不同json文件，只需创建一个通用文件即可，这将很容易维护

例如：

"green" : {
  "darker_color": "#1a3300",
  "lighter_color": "#4f9900",
  "error_color": "#b42805"
},
"yellow" : {
  "darker_color": "#1a3300",
  "lighter_color": "#4f9900",
  "error_color": "#b42805"
},
"red": {
  "darker_color": "#1a3300",
  "lighter_color": "#4f9900",
  "error_color": "#b42805"
}

因此，当您尝试从服务中的json文件获取数据时，您可以这样做，

 const COLOR_SOURCE_PATH = 'assets/YOUR_FILE_PATH';
 public setSkin(skin: ThemeService.Skin) {
       let observable: Observable<Response>;   
       this._httpClient.get(this.COLOR_SOURCE_PATH)
        .subscribe((res: Response) => {
            this.skinData = res[skin];
        }));
      }
   }



 export namespace ThemeService {
    export enum Skin {
        red, 
        green,
        yellow
    }
}

将本地JSON文件映射到键值对数组

2 个答案: