Angular 6 Service Dependency Injection - PullRequest
Новая
       31

Angular 6 Service Dependency Injection

0 голосов
/ 28 сентября 2018

У меня есть список в моем ts файле

component.ts 

list: any[];

constructor(
    private listService: ListService
) {}

ngOnInit() {
     this.listService.getListItems()
      .subscribe(
        res => {
        this.list= res;
      },
        err => {
          console.log(err);
        }
      );
  }

passList(){
    this.listService.modifyList(this.list);
}

Если яПередайте мой список в качестве параметра в функции службе, изменения, сделанные внутри службы в списке, изменят список из component.ts file

ListService.ts 

modifyList(list) {
 // operations.changes made on list are propagated in the list from component.ts
}

Как?

Ответы [ 2 ]

0 голосов
/ 28 сентября 2018

Я бы создал BehaviourSubject в ListService и выставил бы его asObservable.И затем также создайте два метода на этом.Один (initializeList) получит данные из API, и это вызовет инициализацию BehaviourSubject в этой службе.Другой (modifyList) изменил бы данные и вызвал бы обновление BehaviourSubject. 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ListService {

  url = 'https://jsonplaceholder.typicode.com/users';
  private list: BehaviorSubject<any> = new BehaviorSubject<any>(null);
  list$ = this.list.asObservable();

  constructor(private http: HttpClient) {}

  initializeList() {
    this.http.get(this.url)
      .subscribe(list => this.list.next(list));
  }

  modifyList(changedList) {
    // Make further modifications to the changedList and then:
    this.users.next(changedUsers);
  }

}

Затем в моем компоненте я сначала вызвал бы listService.initializeList, который инициализирует listBehaviorSubject в списке.И тогда я бы подписался на list$ observable. 

list: any[];

constructor(
  private listService: ListService
) {}

ngOnInit() {
  this.listService.initializeList();
  this.listService.list$()
    .subscribe(
      res => {
        this.list = res;
      },
      err => {
        console.log(err);
      }
    );
}

passList() {
  this.listService.modifyList(this.list);
}
0 голосов
/ 28 сентября 2018

Если вы передадите массив или объект в Function как присваивание. Он передаст значение в качестве ссылки (т.е. оба будут указывать на одну и ту же ячейку памяти).Если вы измените в одном месте, это отразится и на другом конце.

Во избежание этого.Можете ли вы взять копию переменной (неизменяемой) и передать ее.

Object:

this.list = Object.assign ({}, this.list);

Массив:

this.list = this.list.slice ();

...