如何在 angular2 中点击更新服务 json 或数组值？

Question

我想通过点击更新服务。

服务

import { Injectable } from '@angular/core';
@Injectable()
export class ImageoptionsService {

publicImageOption() {
    return {
      imgoptions: {
      thumbBox: '.thumbBox',
      spinner: '.spinner',
      imgSrc: './assets/background/one.jpg'
    }
  }
 }
constructor() { }

}

并且在我调用它的组件中工作正常。现在我想通过单击一个元素来更新它的 'imgoptions' 值。

mycomonent.component.ts

import { Component, OnInit } from '@angular/core';
import { ImageoptionsService } from "../imageoptions.service";

@Component({
    selector: 'app-bglist',
    templateUrl: './bglist.component.html',
    styleUrls: ['./bglist.component.css']
})

export class mycomonent implements OnInit {
  public backgrounds = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
  constructor( private imageservice: ImageoptionsService) { }
  changebg(index) {
  }
 ngOnInit() {
 }

}

mycomonent.component.html

  <ul class="imagelist">
      <li class="bgimage" *ngFor="let background of backgrounds; let imgi = index" (click)="changebg(imgi)">
         <img src="./assets/background/{{background}}.jpg" alt="{{background}}" /> 
     </li>
  </ul>

从上面的例子来看，我想通过调用'changebg(index){}'这个函数来改变服务中的'imgoptions'值。

如果有任何方法可以执行此操作，请告诉我。

谢谢

Answer 1

解决方法附在下面：

第 1 步：

在 ImageoptionsService 服务中添加一个 setter 方法来更新您的服务数据。

import { Injectable } from '@angular/core';
@Injectable()
export class ImageoptionsService {

private data = {
       imgoptions: {
         thumbBox: '.thumbBox',
         spinner: '.spinner',
         imgSrc: './assets/background/one.jpg'
       }
}

publicImageOption() {
    return this.data;
}

updateData() {
  // put your logic to update this.data
} 

}

第 2 步：

调用事件回调时在服务实例上使用此方法：

import { Component, OnInit } from '@angular/core';
import { ImageoptionsService } from "../imageoptions.service";

@Component({
    selector: 'app-bglist',
    templateUrl: './bglist.component.html',
    styleUrls: ['./bglist.component.css']
})

export class mycomonent implements OnInit {
  public backgrounds = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
  constructor( private imageservice: ImageoptionsService) { }

  changebg(index) {
    // invoking updateData method to update service data
    this.imageservice.updateData();  
  }

ngOnInit() {
  }

}

干杯！

如何在 angular2 中点击更新服务 json 或数组值？

How to update service json or array value on click in angular2?

angular2-services

angular-cli