Question

在我的有角度的应用程序中，我正在使用ng2-stomp。在此，我正在订阅一个方法（在Global类中存在），该方法将在我的仪表板组件中返回连接状态。

public static checkWebSocketConnectionStatus(stompObject : any, stompState : any): any{
        stompObject.state
        .map((state: number) => stompState[state])
        .subscribe((status: string) => {
            return status;
      });
    }

仪表板位于project_name/src/app/dashboard

中

在仪表板组件中，我正在调用此方法并将状态添加到组件变量中。

export class DashboardComponent implements OnInit {

   connectionStatus : any;

   constructor(private _StompService: StompRService){
   }

   ngOnInit(){
      this.connectionStatus =  Global.checkWebSocketConnectionStatus(this._StompService,StompState)
   }

}

现在每次从Web套接字更改连接时，该方法都会自动调用并更新connectionStatus变量。

现在，只要此connectionStatus变量发生变化，我想要的就是。我想更改其他组件变量的值。我在另一个位置有DataConnectionStatus组件。 src/app/shared/layout/header/data-connection-status。

我的意思是两者之间没有父母与子女的关系。因此，只要仪表板组件的connectionStatus变量发生变化。我想更新DataConnectionStatus组件中的status变量。

export class DataConnectionStatusComponent {

    status : boolean = true;

    constructor(){
    };

    ngOnInit(){
    };

}

有什么办法做到吗？

Answer 1

您可以使用BehaviourSubject

在app.service.ts

中

public updatedValue: BehaviorSubject<any> = new BehaviorSubject<any>();

DashboardComponent.ts

export class DashboardComponent implements OnInit {

   connectionStatus : any;

   constructor(private _StompService: StompRService,private appService:AppService){
   }

   ngOnInit(){
      this.connectionStatus =  Global.checkWebSocketConnectionStatus(this._StompService,StompState);
      this.appService.updatedValue.next(this.connectionStatus);
   }

}

DataConnectionStatus组件

export class DataConnectionStatuscomponent implements AfterViewInit{
   connectionStatus:any;
   constructor(private appService:AppService){}
      ngAfterViewInit(){
          this.appService.updatedValue.subscribe(result=>{
          if(result)
            this.connectionStatus=result;
          })
       }
}

检查一个组件的值是否发生更改，而另一组件进行更新

1 个答案: