Angular6 服务依赖注入

Question

我的 ts 文件中确实有一个 list

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

如果您在 Function 中传递数组或对象，因为 assignment.It 会将值作为引用传递（即两者都将指向相同的内存位置）。如果你改变一次地方也会反映在另一端。

为了避免这种情况。你能复制变量（不可变）并传递它吗？

对象：

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

数组：

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

Answer 2

我会在 ListService 中创建一个 BehaviourSubject 并公开它 asObservable。然后还在其上创建两个方法。 One(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);
}

Angular6 服务依赖注入

Angular 6 Service Dependency Injection

service

dependencies

components

code-injection

angular

如何？