角度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

我将在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，它将初始化列表上的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);
}

Answer 2

如果以assignment.It的形式传递函数中的数组或对象，则将值作为引用传递(即两者都指向相同的内存位置)。如果你换了一次，地方也会在另一端反映出来。

为了避免这种情况。你能把变量(不可变)的副本传递给它吗？

对象：

this.list = Object.assign({}，this.list)；

阵列：

this.list = this.list.slice()；