时间戳

首页 > 解决方案 > 将组件中的数据绑定到服务返回视图 - Angular

angular - 将组件中的数据绑定到服务返回视图 - Angular

问题描述

我正在使用 angular 8，并且items在我的组件文件mycomponent.ts中调用了一个变量，该变量绑定到我的 HTML，如下所示。

我的 HTML

<div cdkDropList [cdkDropListData]="items">
    <div *ngFor="let item of items" cdkDrag [cdkDragData]="item" (click)="onClick(item)">
    .......
    </div>
</div>

同样在该组件文件中，它具有如下功能。

msgFrmServer(update) {
    this.items = update;
}

在服务文件myservice.ts中，我有以下代码来调用此函数。

myComponent.msgFrmServer(update);

msgFrmServer我在组件 ts 文件中调用该函数的位置。

变量在方法内部没有问题的情况下得到更新，但视图没有得到更新。这是一个 websocket 应用程序，我从服务器获取更新，并且每次有更新时服务类都会调用组件 ts 文件中的函数。

我可以在组件 ts 中移动服务类函数，然后一切正常。但这看起来是一个糟糕的设计理念。我想将我的服务分开并使其正常工作。有人可以帮我吗？我是 Angular 的新手，我可能缺少 Angular 中可以轻松处理这个问题的一些好功能。

标签： angulartypescriptdata-binding

解决方案

如果您使用 websocket，则可以使用 rxjs 在您的服务中构造 WebSocketSubject（如下面的 stackblitz 示例中的 my-test.service ）。然后你可以在你的组件中订阅它。如果您的 websocket 收到新消息，则调用 subsription 中的下一个函数，然后您可以在组件中调用您想要的任何函数。

服务示例：

import { Injectable } from "@angular/core";
import { webSocket, WebSocketSubject } from "rxjs/webSocket";

@Injectable()
export class MyTestWebsocketService {
  myWebSocket: WebSocketSubject<any>;

  constructor() {
    this.myWebSocket = webSocket({
      url: "ws://xxxxx/"
    });
  }

  getWebSocket() {
    return this.myWebSocket;
  }
}

组件示例：

import { Component, OnInit } from "@angular/core";
import { MyTestService } from "../my-test.service";

@Component({
  selector: "app-my-component",
  templateUrl: "./my-component.component.html",
  styleUrls: ["./my-component.component.css"]
})
export class MyTestComponent implements OnInit {
  constructor(private myTestService: MyTestService) {}
  items: any;
  ngOnInit() {
    this.myTestService.getWebSocket().subscribe(
      msg => {
        this.msgFrmServer(msg);
      }, // Called whenever there is a message from the server.
      err => console.log(err), // Called if at any point WebSocket API signals some kind of error.
      () => console.log("complete") // Called when connection is closed (for whatever reason).
    );
  }

  msgFrmServer(update) {
    this.items = update;
  }
}

Stackblitz 示例

推荐阅读