Angular 8中单页应用程序上的跨组件通信 [英] Cross-Component communication on a Single Page Application in Angular 8

问题描述

Am在前端使用Angular 8在后端使用Laravel在单页应用程序上工作。从登录表单中获取数据后，可以通过JWT提交到后端，效果很好。稍后，我从后端在表单（login.component.ts）的逻辑文件上收到响应
。

Am working on a Single Page Application using Angular 8 on the frontend and Laravel on the backend. After capturing the data from a login form then submitting to the backend via JWT which works fine. Later I get a response on the logic file of the form (login.component.ts) from the backend.

现在我试图通过名为AuthCheck的共享服务将登录组件的响应传递给另一个组件。最后，我将数据传递给Navbar Component文件，最后将其显示在视图上。基本上是跨组件通信。

Now am trying to pass the response from the login component to another component via a shared service called AuthCheck.Finally I pass the data to the Navbar Component file and finally display it on the view. Basically cross-component communication.

在服务中，我使用rxjs侦听响应并设置可观察对象。接下来，我尝试将数据分配给服务中的变量我在Navbar组件逻辑文件中侦听并显示在导航栏视图上。

In the service am using rxjs for listening to the response and setting an observable.Next am trying to assign my data to a variable in the service which I listen to in the Navbar component logic file and display on the navbar view..

问题是我一直收到错误 ERROR TypeError： this.AuthCheck.checkUser不是一个函数 ，它是从登录组件抛出的

The problem is that I keep getting an error of ERROR TypeError: "this.AuthCheck.checkUser is not a function" which is thrown from the login component

〜请协助？

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() {
  }

}

AuthCheck服务

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() { }
}

导航栏组件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);
  }
}

导航栏组件（标记文件）

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

推荐答案

您创建了具有相同名称的属性和方法（ checkUser ）进行如下更改：

You created a property and a method with the same name (checkUser) change it as follows:

更改 checkUser 到 checkUser $ 。您还应该将 BehaviorSubject 设置为 userName 。请取消注释该行

change the checkUser to checkUser$. You should also set the BehaviorSubject to the userName. Please uncomment the line

AuthCheck服务

//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);
}

在导航栏组件中

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

这篇关于Angular 8中单页应用程序上的跨组件通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！