Stackblitz с примером того, как применить наблюдаемые изменения и изменения @Input данных для компонентов с помощью сервиса.
Вам понадобится сервис и Rxjs с подписками, чтобы сделать это угловым способом:
import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';
@Injectable()
export class UserNameService {
execChange: Subject<any> = new Subject<any>();
constructor() {}
/**
* Use to change user name
* @data type: string
*/
userNameChange(data: string) {
this.execChange.next(data);
}
}
И затем в каждом компоненте, где вы хотите изменить имя пользователя, добавьте подписку:
constructor(private userNameService : UserNameService) {
this._subscription_user_name = this.userNameService.execChange.subscribe((value) => {
this.userName= value; // this.username will hold your value and modify it every time it changes
});
}
Как изменить значение, чтобы каждая подписка могла изменять значения? Позвоните в вашу службу execChange
:
this.userNameService.userNameChange('Thor');
РЕДАКТИРОВАТЬ: @Vikas комментарий является правильным и вполне понятным ... вам нужно добавить службу в массив поставщиков ngModule, иначе вы получите головную боль, связанную с ошибками неизвестного поставщика.
@NgModule({
imports: [
...
],
declarations: [...],
providers: [UserNameService]
})
Если вам необходимо сохранить данные на вкладках или при обновлении страницы, используйте также localstorage
.