在Angular中,服务是单例对象,可以在整个应用程序中共享。但是,如果服务中的数据在未预期的情况下发生变化,可能是由于以下原因之一:
以下是一个示例:
@Injectable()
export class DataService {
private data: any[] = [1, 2, 3];
getData(): any[] {
return this.data;
}
}
@Component({
selector: 'app-component',
template: `
`
})
export class AppComponent {
private data: any[];
constructor(private dataService: DataService) {
this.data = [...this.dataService.getData()]; // 复制数据到组件中
}
changeData() {
this.data[0] = 10; // 修改组件中的数据
console.log(this.data); // [10, 2, 3]
console.log(this.dataService.getData()); // [1, 2, 3]
}
}
以下是一个示例:
@Injectable()
export class DataService {
private dataSubject: BehaviorSubject = new BehaviorSubject([1, 2, 3]);
data$: Observable = this.dataSubject.asObservable();
getData(): Observable {
return this.data$;
}
}
@Component({
selector: 'app-component',
template: `
`
})
export class AppComponent implements OnDestroy {
private data: any[];
private dataSubscription: Subscription;
constructor(private dataService: DataService) {
this.dataSubscription = this.dataService.getData().subscribe(data => {
this.data = data; // 更新组件中的数据
});
}
changeData() {
this.data[0] = 10; // 修改组件中的数据
console.log(this.data); // [10, 2, 3]
console.log(this.dataService.getData()); // [10, 2, 3]
}
ngOnDestroy() {
this.dataSubscription.unsubscribe(); // 取消订阅数据
}
}
通过使用这些方法,您应该能够解决Angular可注入服务中的数据无故改变的问题。
下一篇:Angular控件匹配未知。