我是 Angular2 的新手，并开始编写一个应用程序，其中所有方法都在 main.ts 中，而该文件又引用了它在 main.html 中的视图。我将此应用程序重构为子组件和服务。所以，我现在有：
- app.component.ts
- app.html
- sub.component.ts
- sub.html
- data.service.ts
sub.component 作为指令包含在app.component 中。 app.compontent 注入data.service，我可以从app.component 中的点击事件调用服务。
问题
以前，我可以从组件中的函数更新视图上的进度条。现在该函数在它自己的服务中，我如何更新用户关于服务中长时间运行（递归）方法的进度？我假设我必须将服务的进度传递给app.component 或sub.component，但这是怎么做的呢？
【问题讨论】：
您可以使用EventEmitter 将值传递给组件。在您的服务中创建发射器并在组件中订阅它。
// data.service.ts
class DataService() {
progress = new EventEmitter();
longRunningMethod() {
this.progress.emit(value);
}
}
// app.component.ts
class AppComponent() {
constructor(service: DataService) {
service.progress.subscribe(value => console.log(value));
}
}
【讨论】：
您需要从组件（或两个组件）订阅服务。
您可以在 bootstrap 上提供服务（并且所有组件都可以使用它）
bootstrap(App, [YourService]);
或者在组件中使用提供：
@Component({selector: "cmp", provide: [YourService]})
看看这个例子： https://plnkr.co/edit/d4jIDQ4lSuXUDttKFAS6?p=preview
【讨论】：