Я все еще изучаю angular, и я хочу создать сервис с логическим наблюдаемым и подписаться на этот наблюдаемый.
Я следовал этому руководство, потому что я действительно хочу скрыть навигационные ссылки меню, когда пользователь не вошел в систему, и этот учебник почти такой же.
Итак, в моей службе входа в систему:
export class LoginService {
private loggedIn = new BehaviorSubject<boolean>(false);
get isLoggedIn() {
console.info(this.loggedIn);
return this.loggedIn.asObservable();
}
constructor(
public http: Http,
public utilsService: UtilsService) { }
public login(credentials: Credentials): Observable<Response> {
// login code
// if user succeed login then:
this.loggedIn.next(true);
}
public logout(): Observable<Response> {
// logout code
// if user succeed logout then:
this.loggedIn.next(false);
}
}
и в своем компоненте я использую эту функцию
public isLoggedIn: boolean;
userIsLoggedIn() {
this._login.isLoggedIn().subscribe(
((res: boolean) => {
console.info(res);
this.isLoggedIn = res;
})
);
} // <- this is (36,5) position returned from error log
Если все в порядке, то при использовании простого *ngIf = "isLoggedIn" в навигационных ссылках шаблона компонента он должен работать. Но что-то не так, и я получаю следующую ошибку при попытке компиляции.
ERROR in /project-folder/src/app/shared/navbar/navbar.ts (36,5): Cannot invoke an expression whose type lacks a call signature. Type 'Observable' has no compatible call signatures.
Понятия не имею, что случилось. Но как новичок я должен сказать, что я не очень хорошо знаю, что такое BehaviorSubject, и не нашел хорошей и простой для понимания документации по нему.
Это должно быть легко, но после нескольких дней безуспешных попыток я почти перестал скрывать ссылки для незарегистрированных пользователей.
Обновлено: Я добавляю часть package.json, чтобы показать используемые версии:
"devDependencies": {
"@angular/cli": "1.4.5",
"@angular/compiler-cli": "4.4.4",
"@angular/language-service": "4.4.4",
"@types/node": "6.0.60",
"codelyzer": "3.2.0",
// some of the dependencies omitted
"gulp": "3.9.1",
"gulp-coveralls": "0.1.4",
"typescript": "2.3.3"
}
Я добавил часть package.json, чтобы показать используемые версии
Почему вы используете эту устаревшую версию angular 4, если последняя версия - Angular 7?
Я получил это веб-приложение в университете, чтобы учиться и учиться. Я не могу его обновить, и мне нужно использовать то, что я получил. Не мой выбор. Есть несколько частей, которые уже разработаны и работают нормально. Теперь мне нужно внести некоторые изменения, и я не могу, потому что я получаю эту ошибку из своего кода.





Вы определяете isLoggedIn как имущество с помощью этого получателя:
get isLoggedIn() {
console.info(this.loggedIn);
return this.loggedIn.asObservable();
}
Но тогда вы называете это как функция:
this._login.isLoggedIn().subscribe(
((res: boolean) => {
console.info(res);
this.isLoggedIn = res;
})
);
Вместо этого вам нужно получить доступ к нему как к свойству:
this._login.isLoggedIn.subscribe( // No () here
((res: boolean) => {
console.info(res);
this.isLoggedIn = res;
})
);
Большое спасибо! это очевидно, но я не мог этого видеть и потерял на это много времени. Теперь работает отлично. Спасибо.
Какую версию Angular вы используете? Поскольку я вижу
public http: Http, и теперь Angular рекомендую использоватьhttp: HttpClient, как описано здесь: https://angular.io/guide/http