[英]Angular 6 Service Dependency Injection
I do have a list in my ts file 我的ts文件中确实有一个列表
component.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);
}
If I do pass my list as a parameter in a function to a service, the changes that are made inside the service on the list change the list from the component.ts file 如果我确实将列表作为函数中的参数传递给服务,则对列表中服务内部进行的更改会更改component.ts文件中的列表。
ListService.ts ListService.ts
modifyList(list) {
// operations.changes made on list are propagated in the list from component.ts
}
If you pass array or object in Function as assignment.It will pass value as reference (ie both will point to same memory location). 如果您在函数中将数组或对象作为赋值传递,它将作为参考传递值(即,两者都指向相同的内存位置)。 If you change in once place will reflect in another end too.
如果一次更换,也将反映在另一端。
In order to avoid this. 为了避免这种情况。 Can you take copy of the variable (immutable) and pass it.
您能否复制变量(不可变)并将其传递。
Object: 宾语:
this.list = Object.assign({}, this.list); this.list = Object.assign({},this.list);
Array: 数组:
this.list = this.list.slice(); this.list = this.list.slice();
I would create a BehaviourSubject
in the ListService
and expose it asObservable
. 我将在
ListService
创建一个BehaviourSubject
并将其公开为asObservable
。 And then also create two methods on it. 然后在其上创建两个方法。 One(
initializeList
) would get the data from API and this will trigger the initialization of the BehaviourSubject
on this service. 一个(
initializeList
)将从API获取数据,这将触发此服务上BehaviourSubject
的初始化。 The other( modifyList
) would change the data and would trigger an update on the 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);
}
}
In my Component then, I would first call listService.initializeList
which will initialize the list
BehaviorSubject
on the list. 然后,在我的组件中,我将首先调用
listService.initializeList
,它将初始化list
上的BehaviorSubject
列表。 And then I would subscribe to the list$
observable
. 然后,我将订阅
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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.