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);
}

如果我确实在功能中将列表作为参数传递给服务，则在列表上的服务内部进行的更改将从< em> 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

我将在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);
}

Angular 6服务依赖注入

如何？

2 个答案: