Шаблон обновления Angular2 от службы

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, и я могу позвонить службе из события click в 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(App, [YourService]); 

Или предоставить его в компоненте с обеспечивать:

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

Взгляните на этот пример : https://plnkr.co/edit/d4jIDQ4lSuXUDttKFAS6?p=preview