Межкомпонентная связь на одностраничном приложении в Angular 8 - PullRequest
Новая
       25

Межкомпонентная связь на одностраничном приложении в Angular 8

1 голос
/ 02 июля 2019

Я работаю над одностраничным приложением, используя Angular 8 на внешнем интерфейсе и Laravel на внутреннем.После сбора данных из формы входа в систему, а затем отправки в бэкэнд через JWT, который работает нормально.Позже я получаю ответ на файл логики формы (login.component.ts) из бэкэнда.

Теперь я пытаюсь передать ответ от компонента входа в другой компонент через общую службу AuthCheck. Наконец я передаю данные в файл компонента Navbar и, наконец, отображаю их в представлении.В основном межкомпонентная связь.

В сервисе я использую rxjs для прослушивания ответа и установки наблюдаемого. Далее я пытаюсь присвоить мои данные переменной в сервисе, который я слушаю в логике компонента Navbarфайл и отображение в представлении панели навигации.

Проблема в том, что я получаю ошибку ОШИБКА TypeError: «this.AuthCheck.checkUser не является функцией» , которая выбрасывается изкомпонент входа

~ Пожалуйста, помогите?

Login.component.ts 

import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/Services/auth.service';
import { TokenService } from 'src/app/Services/token.service';
import { Router } from '@angular/router';
import { AuthCheckService } from 'src/app/Services/auth-check.service';

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

  public form = {
    email: null,
    password: null
  };

  public error = null;

  constructor(
    private Auth:AuthService,
    private Token:TokenService,
    private router: Router,
    private AuthCheck : AuthCheckService
  ) { }

  //Submit the form data to the backend
  onSubmit(){
    this.Auth.login(this.form).subscribe(
      data => this.handleResponse(data),
      error => this.handleError(error)
    );
  }

  //Function to listen to the response
  handleResponse(data){
    //Pass the data to checkUser method in AuthCheckService
    this.AuthCheck.checkUser(data.user);
  }

  //Handles any errors
  handleError(error){
      this.error = error.error.error;
  }

  ngOnInit() {
  }

}

Служба проверки подлинности 

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

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

private userName = null;

    private userName = new BehaviorSubject<string>(this.checkUser());
    checkUser$ = this.userName.asObservable();

    checkUser(data: any){
        this.user = data;
        this.userName.next(this.user);
    }

    constructor() { }
}

Файл Navbar Component ts 

import { Component, OnInit } from '@angular/core';
import { AuthCheckService } from 'src/app/Services/auth-check.service';

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

  public userName : string;

  constructor(
    private AuthCheck : AuthCheckService
  ) { }

  ngOnInit() {
      this.AuthCheck.checkUser$.subscribe(message => this.userName = message);
  }
}

Компонент Navbar (файл разметки) 

<a class="navbar-brand" *ngIf="loggedIn">Welcome {{ userName }}</a>

1 Ответ

3 голосов
/ 02 июля 2019

Вы создали свойство и метод с одинаковым именем (checkUser), изменив его следующим образом:

измените checkUser на checkUser$.Вы также должны установить BehaviorSubject на userName.Пожалуйста, раскомментируйте строку

Служба проверки подлинности 

//private userName = null;

//Check logged in userName
private userName = new BehaviorSubject<string>('Martin');
checkUser$ = this.userName.asObservable();


checkUser(data: any){
    this.user = data;
    this.userName.next(this.user);
}

В вашем компоненте navbar 

ngOnInit() {
   this.AuthCheck.checkUser$.subscribe(message => this.userName = message);
}
...