Question

我是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，但这是怎么做的？

Answer 1

您可以使用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));
  }
}

Answer 2

您需要从组件（或两个组件）订阅服务。

您可以在bootstrap上提供服务（并且它将对所有组件都可用）

bootstrap(App, [YourService]);

或者在组件中提供它：

@Component({selector: "cmp", provide: [YourService]})

看看这个例子： https://plnkr.co/edit/d4jIDQ4lSuXUDttKFAS6?p=preview

服务中的Angular2更新模板

2 个答案: