Angular 8 中单页应用程序上的跨组件通信
Cross-Component communication on a Single Page Application in Angular 8
我正在开发单页应用程序,前端使用 Angular 8,后端使用 Laravel。从登录表单捕获数据然后通过 JWT 提交到后端后工作正常。后来我得到回应
在后端表单 (login.component.ts) 的逻辑文件上。
现在我正在尝试通过名为 AuthCheck.Finally 的共享服务将登录组件的响应传递到另一个组件,我将数据传递到 Navbar 组件文件并最终将其显示在视图上。基本上是跨组件通信。
在服务中我使用 rxjs 来监听响应并设置一个 observable.Next 我试图将我的数据分配给服务中的一个变量,我在 Navbar 组件逻辑文件中监听并显示在导航栏视图..
问题是我不断收到 ERROR TypeError: "this.AuthCheck.checkUser is not a function" 的错误,这是从登录组件
抛出的
~请帮忙?
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
) 的方法,将其更改如下:
将 checkUser
更改为 checkUser$
。您还应该将 BehaviorSubject
设置为 userName
。请取消注释行
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,后端使用 Laravel。从登录表单捕获数据然后通过 JWT 提交到后端后工作正常。后来我得到回应 在后端表单 (login.component.ts) 的逻辑文件上。
现在我正在尝试通过名为 AuthCheck.Finally 的共享服务将登录组件的响应传递到另一个组件,我将数据传递到 Navbar 组件文件并最终将其显示在视图上。基本上是跨组件通信。
在服务中我使用 rxjs 来监听响应并设置一个 observable.Next 我试图将我的数据分配给服务中的一个变量,我在 Navbar 组件逻辑文件中监听并显示在导航栏视图..
问题是我不断收到 ERROR TypeError: "this.AuthCheck.checkUser is not a function" 的错误,这是从登录组件
抛出的~请帮忙?
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
) 的方法,将其更改如下:
将 checkUser
更改为 checkUser$
。您还应该将 BehaviorSubject
设置为 userName
。请取消注释行
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);
}