Angular 共享服务 - 将项目添加到列表时，共享服务正在复制数据

Question

我正在学习 Angular 并且需要您的帮助 :)。

我有两个组件 list-items 和 list-item。

list-items 显示项目列表
list-item是添加一个新的列表项。

当我在 list-item 上添加一个列表项并导航回 list-items 时，共享服务的项目列表有重复的项目。简而言之，当我添加一个列表项时，我在列表项屏幕中看到多个重复项。 GitHub link 用于复制问题的示例项目是 @ https://github.com/ChathaKiran/AngularSharedServiceIssue。下面是我的代码的快照。请告诉我如何确保没有重复。

共享服务

export class AppService {
  private listItem = new BehaviorSubject(null);
  listItemObservable = this.listItem.asObservable();

  private listItems = new BehaviorSubject([] as string[]);
  listItemsObservable = this.listItems.asObservable();

  updateListItem(_listItem: string) {
    this.listItem.next(_listItem);
  }

  updateListItems(_listItems: string[]) {
    this.listItems.next(_listItems);
  }
}

列表项组件

export class ListItemsComponent implements OnInit {
  _localListItems: string[];

  constructor(private appService: AppService){}

  ngOnInit(){
    this.appService.listItemsObservable.subscribe(_listItems => {
      this._localListItems = _listItems;
    });

    this.appService.listItemObservable.subscribe(_listItem => {
      if (_listItem != undefined) {
        var allItems = this._localListItems.concat(_listItem);
        this.appService.updateListItems(allItems);
      }
    });
  }
}

列表项组件

export class ListItemComponent implements OnInit {

  listItemName: string;

  constructor(private maintenanceWindowService: AppService, private router: Router) { }

  ngOnInit() {}

  btnAddListItem(){
    this.maintenanceWindowService.updateListItem(this.listItemName);

    this.router.navigate(['list-items']);
  }
}

Answer 1

您总是需要取消订阅您的 Observable。阅读此 article 并使用 ngOnDestroy 更新您的代码，您将从 Observable 中 .unsubscribe()，或添加一些可管道运算符，如 .pipe(take(1))。在这里阅读更多 Piepable operators

Angular 共享服务 - 将项目添加到列表时，共享服务正在复制数据

Angular Shared Service - when adding an item to list, shared service is duplicating data

behaviorsubject

angular