Angular 6服务依赖注入

Question

我的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文件中的列表。

ListService.ts

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

怎么样？

Answer 1

如果您在函数中将数组或对象作为赋​​值传递，它将作为参考传递值（即，两者都指向相同的内存位置）。 如果一次更换，也将反映在另一端。

为了避免这种情况。 您能否复制变量（不可变）并将其传递。

宾语：

this.list = Object.assign（{}，this.list）;

数组：

this.list = this.list.slice（）;

Answer 2

我将在ListService创建一个BehaviourSubject并将其公开为asObservable 。 然后在其上创建两个方法。 一个（ initializeList ）将从API获取数据，这将触发此服务上BehaviourSubject的初始化。 other（ 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 ，它将初始化list上的BehaviorSubject列表。 然后，我将订阅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);
}