#angular
#angular
Вопрос:
У меня есть шаблон, в котором ссылки изменяются в соответствии с переменной ‘userId’.
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo"><img src="../../public/images/logo.png" alt="" /></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>
<a routerLink="" routerLinkActive="active"></a>
</li>
<li *ngIf="userId"><a>Welcome {{userInfo.name}}</a></li>
<li><a routerLink="gallery" routerLinkActive="active">Gallery</a></li>
<li *ngIf="userId"><a routerLink="upload" routerLinkActive="active">Upload</a></li>
<li *ngIf="userId"><a routerLink="logout" routerLinkActive="active">Logout</a></li>
<li *ngIf="! userId"><a routerLink="auth" routerLinkActive="active">Login</a></li>
<li *ngIf="! userId"><a routerLink="auth" routerLinkActive="active">Register</a></li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
И у меня есть компонент, у которого есть служба, которая получает данные:
import { Component, OnInit } from '@angular/core';
import { SessionService } from '../session.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
providers: [SessionService]
})
export class HomeComponent implements OnInit {
public userId = "";
public userInfo = "";
constructor(
private sessionService: SessionService
) { }
ngOnInit() {
this.userId = this.sessionService.getLoggedInUserId();
if (this.userId !== null) {
this.sessionService.getLoggedInUserDetails(this.userId).subscribe(
data => {
this.userInfo = data.data[0];
}
)
}
}
}
изменения вызова службы не обнаружены в части html. ссылки отображаются в соответствии с переменной ‘userId’.
Ответ №1:
Это может быть вызвано вашим sessionService
, но ваш вопрос не содержит подробностей, чтобы быть уверенным.
Вы можете попробовать
constructor(
private sessionService: SessionService,
private zone:NgZone
) { }
ngOnInit() {
this.userId = this.sessionService.getLoggedInUserId();
if (this.userId !== null) {
this.sessionService.getLoggedInUserDetails(this.userId).subscribe(
data => {
zone.run() => {
this.userInfo = data.data[0];
});
}
)
}
}
Если это решает проблему, то служба нуждается в дальнейшем исследовании.
Комментарии:
1. это не помогло. как и в react js, изменения в компонентах также отображаются в html-части, но здесь панель навигации не меняется. если я обновлю страницу, я увижу изменения на панели навигации.
2. Речь идет о
userInfo.name
, верно? Вы получаете сообщение об ошибке в консоли браузера?. Не могли бы вы попробовать{{userInfo?.name}}
вместо этого? или{{userInfo | json}}
и опубликовать комментарий с результатами.3. нет его с идентификатором пользователя. сценарий заключается в том, что функция getLoggedInUserId() возвращает идентификатор, хранящийся в локальном хранилище. если идентификатор пользователя присутствует, то на стороне просмотра будут показаны только три ссылки.
4. Итак, что вы получаете, когда добавляете
x{{userId}}y
в tempalte (за пределами*ngIf="userId"
?5. ничего. Но если я обновлю страницу, я смогу увидеть
userId