Question

我对角度2很新，并坚持一个基本问题。

显示ui的组件如下：的 chat.ts

@IonicPage()
@Component({
  selector: 'page-chat',
  templateUrl: 'chat.html',
  providers: [ChatService]
})
export class ChatPage {
 items: SimpleMessage[] = [];

createChatBubble(chatMessage: string){
    //alert(this.chatMessage);
     this.items.push(new SimpleMessage(chatMessage));
  }
}

chat-service.ts

        @Injectable()

            export class ChatService {
            openSocket(){
                this.ws = new WebSocket('ws://' + this.host + '/chat/ws');
                this.ws.addEventListener('message', event => {
                  this.zone.run(() => {
                    var msg = JSON.parse(event.data);
                    this.broadcast(msg);
                  });
                });


  broadcast(msg){
      let message = this.parseModel(msg);
      let chatReply = new SimpleMessage(message, 'bot');
    }
}

因此，从broadbast函数中的服务器收到的消息需要以某种方式传递给chat.ts项目对象。请指教

Answer 1

您可以使用具有您从组件订阅的可观察对象的服务。

编辑：我写了另一个例子。我不会写一个套接字，但是我编写了一个子组件，它会在按钮点击时触发一些事件。整个应用都可以下载here。

服务

DF$test

应用组件

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';

@Injectable()
export class CommunicateService {

  // source of change
  private newStringSource = new Subject<string>();

  // observable
  public stringCreated = this.newStringSource.asObservable();

  public sendNewString(newString: string): void {
    // broadcasts the new data to every listener
    this.newStringSource.next(newString);
  }
}

带按钮触发器的孩子

import {Component, OnInit} from '@angular/core';
import {CommunicateService} from './communicate.service';

@Component({
  selector: 'app-root',
  template: `<h1>
    {{title}}
    <app-child></app-child>
  </h1>
  `
})
export class AppComponent implements OnInit {

  title = 'app works!';


  constructor(private communicateService: CommunicateService) {
  }

  ngOnInit(): void {
    this.communicateService.stringCreated.subscribe(event => {
      console.log(event);
    });
  }
}

所以你要做的不是将服务注入到子comp中，而是将它注入socket服务并在收到新数据时调用sendNewString。

希望它有所帮助。

angular 2如何将服务响应数据传递给UI

1 个答案: