变量捕获 behaviorsubject angular 服务

Question

我对 angular

中的 behaviorSubjects 有疑问

让我们用示例代码描述一个问题

我有这样的服务

export class DataService {
   private _data$ = new BehaviorSubject<any[]>([]);

   public get data() {
      return this._data$.asObservable();
   }

   getDataFromServer() {
     this.http.get(...).subscribe((res) => {
        this._data$.next(res)
    })
   }
}

我也有两个这样的组件

export class componentA {
  
  data : any[] = []

  constructor(private dataService:DataService) {}

  ngOnInit() {
    this.dataService.data.subscribe((res) => {
      this.data = res
    })
  }
}

export class componentB {

  data :any[] = []

  constructor(private dataService:DataService) {}

  ngOnInit() {
    this.dataService.data.subscribe((res) => {
      this.data = res
    })
  }
}

并在两个组件的模板中显示数据数组我的问题是当我从 componentB 更改 behaviorSubject 的数据时，componentA 中的数据发生更改，我希望它们具有不同的 behaviorSubject 实例

Answer 1

我相信您想要实现的目标与使用 BehaviourSubject 无关。

你可以做的是 provide 你对每个组件的服务是这样的：

组件 A：

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrl: ['...'],
  providers: ['MyService'] 
})
export class ComponentA

组件 B

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrl: ['...'],
  providers: ['MyService'] 
})
export class ComponentB

每个组件都有一个不同的服务实例，如果组件 B 对服务进行了一些更改，组件 A 将不会知道这些更改，反之亦然，B 不会知道这些更改由 A

制成

理想情况下，您希望在整个应用程序中使用相同的服务实例，但这种方式也是有效的。

Answer 2

模块中声明的服务在模块中的所有组件之间共享。如果您想要服务的私有实例，则需要将其声明为组件本身的提供者。

类似于：

@Component({
  selector: 'app-a',
  templateUrl: './a.component.html',
  providers: [ DataService ]
})

变量捕获 behaviorsubject angular 服务

variable capture behaviorsubject angular services

rxjs

angular