在 service.subscribe 中组件的构造函数中的 Angular 更新不起作用

Posted 2023-03-13

【中文标题】在 service.subscribe 中组件的构造函数中的 Angular 更新不起作用

【英文标题】：In Angular Update in Component's Constructor in service.subscribe doesn't work

【发布时间】：2018-05-29 16:09:13

【问题描述】：

我有两个组件，父组件和子组件，并使用共享服务在它们之间发送数据。

服务类如下所示：

export class AddItemDataTransferService 

  // Observable string sources
  private childData= new Subject<string>();
  private parentData= new Subject<string>();


  // Observable string streams
  childdata$ = this.childData.asObservable();
  parentdata$ = this.parentData.asObservable();

   // Service message commands
addChildData(ch: string) 
  this.childData.next(ch);
 

 addParentData(ch: string) 
  this.parentData.next(ch);
  

  

借助 Angular 文档中的教程，我做了一些事情，并且在组件之间发送数据效果很好。

让我们看看子组件的外观：

export class AddItemSuccesResultComponent implements OnInit 
  newString = "This Should be changed";

 constructor(private getDataService: AddItemDataTransferService)  

 getDataService.parentdata$.subscribe(
  ch=> 
              alert(ch);        
           this.newString = ch;

      );
   
  

在这里获取数据完美。在浏览器中调用警报并弹出窗口显示“ch”字符串。所以这意味着数据是从服务导入的，但是 this.newString 不会更新。

当我从子组件中导入父视图中的数据时，同样的情况也有效。但是当我想在子组件中做同样的事情时，它失败了

【问题讨论】：

你试过用console.log('ch: ', ch);而不是alert吗？另外我认为最好订阅 ngOnInit() 而不是构造函数。

有什么区别？为什么它很重要？结果是一样的，ch 登录到控制台，但是对象没有更新

【参考方案1】：

尝试将代码移至 ngOnInit。请注意您放入构造函数中的逻辑，因为可能依赖于它尚不可用。数据在构造函数中并不总是立即可用，因此它应该只将初始局部变量设置为简单值。 ngOnInit 是组件获取其初始数据的好地方；

【讨论】：

我将方法移至 ngOnInit，但没有任何改变。alert 可用于字符串数据，但 newString 未更新 :( 虽然从子级向父级获取数据并更新它时它可以正常工作跨度>

另外要检查的是确保你的getDataService只包含在app.module的providers中，而不是包含在多个组件的providers中；否则它将有多个服务实例，这可能会弄乱订阅。

【参考方案2】：

在您的班级AddItemDataTransferService 中，您应该将您的Subjects 更改为BehaviorSubjects。我假设您的子组件订阅了您的服务上公开的可观察对象您已经addParentData 或addChildData。

由于您使用的是Subjects，一旦您向它们添加数据，它们将仅向当前订阅者广播。任何后续订阅者都不会获得之前广播的数据。

通过使用BehaviorSubject，任何后续订阅者都将获得之前广播的数据。

export class AddItemDataTransferService 

  // BehaviorSubjects must have a starting value. 
  private childData= new BehaviorSubject<string>(null);
  private parentData= new BehaviorSubject<string>(null);

【讨论】：

是的，好点。从 Subject 更改为 BehaviorSubject 效果很好，非常感谢