Блог

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

Вот мой сервисный код:

 import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {BlogPost} from '../models/blog-post';
import {Observable} from 'rxjs';
import {Channel} from '../models/channel';

@Injectable({
  providedIn: 'root'
})
export class BlogPostsService {

     private url = '/assets/data/';
     private loggedIn: Observable<boolean>;

     constructor(private httpClient: HttpClient) {
     }
     getBlogPosts(): Observable<BlogPost[]> {
        return this.httpClient.get<BlogPost[]>(this.url   'blog-post.json');
     }

     getChannels(): Observable<Channel[]> {
        return this.httpClient.get<Channel[]>(this.url   'channels.json');
     }

     setLoginStatus(data: Observable<boolean>) {
        this.loggedIn = data;
     }

     getLoginStatus(): Observable<boolean> {
        return this.loggedIn;
     }
}
 

Вот файл signin.component.ts, отправляющий код:

 onSubmit() {
let users = [];
users = Array.from(JSON.parse(localStorage.getItem('users')));
const selectedUser = users.filter(user => {
  return user.email === this.signInForm.value.email
    amp;amp; user.password === this.signInForm.value.password;
});
if (selectedUser.length === 1) {
  this.router.navigate(['/home']).then(r => {
    this.blogPostsService.setLoginStatus(r);
  });
} else {
  this.formError = true;
  setTimeout(() => {
    this.formError = false;
  }, 2000);
}
}
 

Затем в моем header.component.ts я пытаюсь получить loggedInStatus, но получил сообщение об ошибке на картинке выше. Пожалуйста, как мне это исправить?
header.component.ts

 import {Component, OnInit} from '@angular/core';
import {BlogPostsService} from '../services/blog-posts.service';

@Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  loggedIn;

  constructor(private blogPostsService: BlogPostsService) {
  }

  ngOnInit(): void {
    this.loggedIn = this.blogPostsService.getLoginStatus()
      .subscribe(data => {
        this.loggedIn = data;
        console.log(this.loggedIn);
    });
 }

}
 

В вашем BlogPostsService сервисе loggedIn нет наблюдаемой переменной, вы просто задали тип как наблюдаемый.

Вы можете напрямую получить доступ к значению без подписки,

   ngOnInit(): void {
    this.loggedIn = this.blogPostsService.getLoginStatus();
    this.loggedIn = data;
    console.log(this.loggedIn);
  } 

Если вы хотите выполнить подписку, вам необходимо внести изменения в BlogPostsService ,

of оператор импорта из rxjs,

  getLoginStatus(): Observable<boolean> {
    return of(this.loggedIn);
  } 

1.In ваш сервис преобразуется loggedIn в субъект или субъект поведения

2. И верните его как наблюдаемый, например

 private loggedIn: Subject<boolean>;

getLoginStatus():Observable<boolean>{
   return this.loggedIn;
}

setLoginStatus(data:boolean) {
    this.loggedIn.next(data);
}
 

3. И, наконец, вы можете получить доступ loggedIn к своему header.component.ts следующим образом

 loggedIn$:Observable<boolean>
ngOnInit(): void {
  this.loggedIn$ = this.blogPostsService.getLoginStatus();
}
 

4. Вы можете использовать loggedIn$ в своем шаблоне использование асинхронного канала без необходимости подписки

 <h1 *ngIf="(loggedIn$ | async)">Signed In</h1>