如何使事件触发Angular2中的多个组件

Question

我有一个输入组件，一个输出组件和一个处理服务。 我希望用户输入一个字符串，并让处理服务将已处理的消息输出到输出组件。 我遇到的麻烦是从处理服务获取已处理的消息。 这是我到目前为止的内容：

<input class="input" type ="text"[(ngModel)]="text" (keyup.enter)="process(text)">
export class InputComponent {
    text: String;
    constructor(private processService: ProcessService){}
process(text){
        this.processService.process(text);
}
}
export class ProcessService {
processedMsg: string;
    process(msg) {
    this.processedMsg = "a message thats processed";
    }
    getMessage() {
    return this.processedMsg;
    }
    }
        export class OutputComponent {
    output: string;
            constructor(private processService: ProcessService){}
            getOutput() {
                this.output = this.processService.getMessage();
            }

我如何才能做到这一点，以便在用户按下Enter键时处理输入并将其提供给输出？ 谢谢。

Answer 1

有两种方法可以达到您想要的效果。 我认为，第一种方法是最简单的掌握方法，它紧随您到目前为止所掌握的内容。 这一切都是直接告诉模板显示服务上次处理的值， 不建议这样做 。

import { Component, Injectable } from '@angular/core';

@Injectable()
class ProcessService {
  processedMsg: string = "";
  process(msg) {
    this.processedMsg = "Processed: \""+msg+"\"";
  }
}

@Component({
  selector: 'output',
  template: '<span>{{processService.processedMsg}}</span>'
})
class OutputComponent {
  constructor(public processService: ProcessService){}
}

@Component({
  selector: 'my-app',
  directives: [OutputComponent],
  providers: [ProcessService],
  template: `
    <input class="input" type ="text" [(ngModel)]="text" (keyup.enter)="process(text)"><br>
    <output></output>
  `
})
export class AppComponent {
  text:string;
  constructor(private processService: ProcessService){}
  process(text){
    this.processService.process(text);
  }
}

我们也可以使用Observables来做到这一点，请参见以下答案： 委托：Angular2中的EventEmitter或Observable

import { Component, Injectable, OnInit, OnDestroy } from '@angular/core';

import {BehaviorSubject} from "rxjs/BehaviorSubject";
import {Subscription} from 'rxjs/Subscription';

@Injectable()
class ProcessService {
  private _processedMsgSrc: BehaviourSubject<string> = new BehaviorSubject<string>("");
  processedMsg = this._processedMsgSrc.asObservable();
  process(msg) {
    this._processedMsgSrc.next("Processed: \""+msg+"\"");
  }
}

@Component({
  selector: 'output',
  template: '<span>{{output}}</span>'
})
class OutputComponent implements OnInit, OnDestroy {
  output:string;
  private _subscription:Subscription;
  constructor(public processService: ProcessService){}
  ngOnInit() {
    this.subscription = this.processService.processedMsg.subscribe(
      msg => this.output = msg
    );
  }
  ngOnDestroy() {
    // stop the subscription when the component is destroyed
    this.subscription.unsubscribe();
  }
}

@Component({
  selector: 'my-app',
  directives: [OutputComponent],
  providers: [ProcessService],
  template: `
    <input class="input" type ="text" [(ngModel)]="text" (keyup.enter)="process(text)">
    <br>
    <output></output>
  `
})
export class AppComponent {
  text:string;
  constructor(private processService: ProcessService){}
  process(text){
    this.processService.process(text);
  }
}

第二种方法可能会更好，因为它可以完全分离两个组件，使您可以更改Process Service的工作方式而无需更改任何其他代码。