Служба Observables – недопонимание/лучшая практика

Я борюсь с подходом наблюдения за обслуживанием между двумя компонентами. У меня есть компонент профиля, который включает компонент настроек. Оба используют user.service, где провайдер определен в app.module.ts. Провайдер больше нигде не определен. Поэтому, когда я меняю, например, firstName на settings.component и сохраняю его. Изменение не отразится на боковой панели profile.component, пока я не перезагружу страницу.

В нерабочее время. Я нашел решение сделать это с помощью генератора событий, который сработает, как только произойдет обновление. Это решило бы мою проблему выше, но я думаю, что это неправильный путь, так как я прочитал статью ниже:

Как правильно использовать EventEmitter?

Разве это не должно работать без эмиттера событий?

Итак, мой вопрос: Какой подход вы бы использовали в этой ситуации или как лучше всего? Конечно, в моем коде может быть проблема. Я действительно новичок в angular.

app.module.ts

В app.module.ts я определил:

 providers: [UserService]

profile.component.ts

@Component({
    selector: 'app-profile',
    templateUrl: './profile.component.html',
    styleUrls: ['./profile.component.css']
})

export class ProfileComponent implements OnInit {
    user: any;
    Role = Role;
    constructor(private _userService: UserService, ) { }


    ngOnInit() {
        const token = localStorage.getItem('token');
        const role = jwt.decode(token).user.role;
        this._userService.getUser().subscribe(v => { this.user = v; });
        // Event Emmiter Subscription
        this._userService.change.subscribe(v => { this.user = v; });
    }
}

profile.component.html

<div *ngIf="user" class="container mt50">
    <div class="row profile">
        <div class="col-md-3">
            <div class="profile-sidebar">
                <!-- SIDEBAR USERPIC -->
                <div class="profile-userpic">
                    <img gravatar [email]="user.email" [size]="256" class="img-responsive animated bounceIn" alt="">
                </div>
                <!-- END SIDEBAR USERPIC -->
                <!-- SIDEBAR USER TITLE -->
                <div class="profile-usertitle">
                    <div class="profile-usertitle-name">
                        {{ user.firstName }} {{ user.lastName }}
                    </div>
                    <div class="profile-usertitle-job">
                        {{ user.email }}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9">
                <app-profile-settings-admin *ngIf="user.role === Role.ADMINISTRATOR"></app-profile-settings-admin>
        </div>
    </div>
</div>

user.service.ts

@Injectable()
export class UserService {
    public user: any;

    constructor(private http: Http) { }
    // EVENT EMIITER
    public change: EventEmitter<any> = new EventEmitter();
    getUser() {
        const token = localStorage.getItem('token')
            ? '?token=' + localStorage.getItem('token')
            : '';
        return this.http.get('api/user' + token)
            .map((response: Response) => {
                this.user = response.json().obj;
                return this.user;
            })
            .catch((error: Response) => Observable.throw(error.json()));
    }

    updateUser(user) {
        const body = JSON.stringify(user);
        const headers = new Headers({'Content-Type': 'application/json'});
        const token = localStorage.getItem('token')
            ? '?token=' + localStorage.getItem('token')
            : '';
        return this.http.patch('api/user/' + token, body, {headers: headers})
            .map((response: Response) => {
                const result = response.json();
                this.user = result.obj;
                // EMIT EVENT
                this.change.emit(this.user);
                return this.user;
            })
            .catch((error: Response) => Observable.throw(error.json()));
    }
}

profile.settings.admin.component.ts

Внутри этого компонента есть не что иное, как форма, которая запускает следующий код при отправке:

onSubmit() {
    this._userService.updateUser(this.userForm.value)
        .subscribe(
            data => {
                this._toastyService.default('Settings saved!');
                console.log(data);
            },
            error =>{
                this._toastyService.default('Error occured!');
                console.log(error);
            }
        );
}