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

有几种方法可以达到你想要的效果。第一种方式是我认为最简单的方法，它遵循你迄今为止非常接近的方式。所有这一切都直接告诉模板显示服务上次处理的值，不推荐这样做。

android:id="@+id/container"

我们也可以使用Observables执行此操作，请参阅此答案的来源：Delegation: EventEmitter or Observable in Angular2

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);
  }
}

第二种方式可能会更好，因为它完全分离了两个组件，允许您在不更改任何其他代码的情况下更改Process Service的工作方式。

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

1 个答案: