Report

Подскажите пожалуйста как в angular2 при помощи rxjs через каждые 5 секунд получать данные с сервера. Вот мой код, он работает, но есть проблема.
компонент:
import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/interval'; import 'rxjs/add/operator/switchMap'; private getUserTasks(userId): void {     Observable       .interval(5000)       .switchMap(() => this.tasksService.getUserTasks(userId))       .subscribe(           data => {               this.userTasks = JSON.parse(data);                                console.log('userTasks', this.userTasks);           }       ) }; сервис:
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/interval'; @Injectable() export class TasksService {   constructor(private http: HttpClient) { };   getUserTasks(userId): Observable<any> {       return this.http.get('http://127.0.0.1:8000/app_tasks/user_tasks?user_id=' + userId);   }; }  
Проблема в том, что первый запрос отправляется после того как пользователь подождёт 5 секунд, глядя в белый экран. А мне нужно чтобы первый запрос отправлялся сразу после загрузки страницы. 
Я мог бы повесть индикатор или спиннер, но дело в том, что, возможно, период придётся увеличить до 60 - 120 сек. Всё это время смотреть на индикатор неприятно пользователю

ребята, скажите пожалуйста что-нибудь про эту поделку. исходники здесь
верстал только по браузеры мобильных устройств. бекенда нет поэтому для хранения информации используется localStorage. вот список паролей для входа:
ADMINS: user2 / qwerty2 user4 / qwerty4 USERS: user1 / qwerty1 user3 / qwerty3 user5 / qwerty5 user6 / qwerty6 user7 / qwerty7 хотелось бы услышать что-нибудь по js, но вряд ли кто-нибудь будет копаться. поэтому пишите общее впечатление, юзабилити и т.п.

помогите пожалуйста советом и направьте в правильное русло так сказать
на angular2 сделал небольшой сайт, который состоит из двух страничек: расписание и список людей. архитектурно он состоит из главного компонента и двух компонентов страничек
сайт двуязычный. для этого я в главный компонент поместил стандартный material-переключатель и связал его с глобальным сервисом. в этом глобальном сервисе содержатся переменные, которые должны быть видны из любой части сайта. в частности там хранится признак установленного в настоящий момент языка
переключатель в шаблоне главного компонента:
<mat-slide-toggle class="toggler-lang" (click)="toggleLang()" [(ngModel)]="isEnLang"></mat-slide-toggle>     сервис глобальных переменных:
private isEnLang = new BehaviorSubject(false); constructor() { } getLangState(): Observable<boolean> {   console.log('this.isEnLang', this.isEnLang);     return this.isEnLang; };   setLangState(state): void {   console.log('set isEnLang', state);   this.isEnLang.next(state); };   функционал главного компонента для смены языка:
private isEnLang: boolean; constructor(private globalVarsService: GlobalVarsService) {}; ngOnInit() {     this.checkLang(); }; private toggleLang() {     this.isEnLang = !this.isEnLang;     this.globalVarsService.setLangState(this.isEnLang); }; private checkLang(): void {   this.globalVarsService.getLangState().subscribe(data => setTimeout(() => {     console.log('subscribe', data);     this.isEnLang = data;   }, 0));      };  проблема в том, что мне приходится в каждом компоненте, в котором используется переключения языка подключать этот "глобальный" сервис и настраивать подписку получения изменения "глобальной" переменной isEnLang. и что самое страшное - этот код дублируется в каждом компоненте.
сейчас сайт состоит из двух страничек и такое дублирование кода не страшно, но по мере роста сайта будет очевидно, что решение хоть и рабочее, но неверное
подскажите пожалуйста более практичное решение
даже если остальные решения более неудобные, то всё равно расскажите про них. всегда лучше знать несколько вариантов решения проблемы
GITHUB

По совету форумчан для всяких динамичных крутилок и пыхтелок решил использовать Vue.js. Никогда с ним дела не имел, но из обзора понял, что штука клёвая и нужная. Пока для меня сложностью является то, что одну и ту же задачу можно решить множеством способов, но при этом понять, какой способ лучше и не таит ли каких-то подводных камней, не хватает опыта.
В качестве примера сделал вот такую штуку, хочу прикрутить к справочнику CSS к большинству стилевых свойств.
https://jsfiddle.net/webref/b3abxg5h/
Интересует следующее: 
насколько правильно сделал, можно ли проще и лучше? нужно ли использовать компоненты? Ну и вообще, приветствуются всякие советы и подсказки.