Я новичок в angular, мне удалось создать базовое приложение с несколькими макетами и на странице редактирования профиля, когда я обновляю данные пользователя и нажимаю сохранить, я хочу, чтобы это изменение отражалось в заголовке приложения (компонента)
Я создал образец приложения, которое несколько похоже на базовую модель моего приложения.
См. https://angular-component-communication.stackblitz.io или отредактируйте https://stackblitz.com/edit/angular-component-communication
Я изначально устанавливаю некоторые значения для локального хранилища (в app.component.ts) и отображаю эти значения в заголовке (./ app / _layout / app-header /), например, имя, адрес электронной почты и т. д.
В этом примере приложения я пытаюсь изменить значение локального хранилища из полностью независимого компонента и отразить изменения в заголовке.
пожалуйста, найдите мой образец кода ниже
app.component.ts
export class AppComponent {
constructor(){
//since we dont have a login in this sample code iam manually setting the localstorage values
const initialAuthUserData = {
token:'init-SOMETOKENSTRINGGOESHERE',
name:'wilson',
email:'[email protected]',
is_admin:1,
avatar:'init-avatar.jpg',
user_id:1234
};
localStorage.setItem('authUser', JSON.stringify(initialAuthUserData));
}
}
app.routing.ts
const mainRoutes: Routes = [
{
path: '',
component: ApplicationLayoutComponent,
children: [
{ path: '', component: HomeComponent, pathMatch: 'full'}
]
},
{ path: '**', redirectTo: '' }
];
user.service.ts
export class UserService {
constructor() { }
setUser() {
//In real app case i would be implimenting a auth check action and will set localStorage value on success
const userDataNewData = {
token:'SOMETOKENSTRINGGOESHERE',
name:'wade wilson',
email:'[email protected]',
is_admin:1,
avatar:'avatar.jpg',
user_id:123
};
// store user details and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem('authUser', JSON.stringify(userDataNewData));
}
getUser() {
const AuthUser = JSON.parse(localStorage.getItem('authUser'));
return AuthUser;
}
}
app-header.component.ts
export class AppHeaderComponent{
userData:any = {};
constructor(private userService:UserService) {
//from user data variable i print user details on app header
this.userData = userService.getUser();
}
}
app-header.component.html
<a class="nav-link">Hello {{userData.name}} (<small>{{userData.email}}</small>)
