来自服务的Angular2更新模板

Question

I'm new to Angular2, and started off writing an app where all methods were in main.ts , and that file in turn referenced its view in main.html . I refactored this app into subcomponents and services. So, I now have:

- app.component.ts
- app.html
- sub.component.ts
- sub.html
- data.service.ts

sub.component is included as a directive in app.component . app.compontent injects data.service and I can call the service from a click event in app.component .

The Question

Previously, I could update a progress bar on the view from a function in the component. Now that the function is in its own service, how do I update the user on the progress of the long-running (recursive) method in the service? I assume I have to pass the progress from the service to app.component or sub.component , but how is this meant to be done?

Answer 1

You can use EventEmitter to pass values to the component. Create emitter in your service and subscribe to it in the component.

// 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

You need subscribe to service from component ( or both component ).

You can provide service on bootstrap ( and it will be available to all your components )

bootstrap(App, [YourService]);

Or to provide it in component with provide:

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

Take a look on this example: https://plnkr.co/edit/d4jIDQ4lSuXUDttKFAS6?p=preview