Angular 5：如何将事件从authguard广播到 Headers ？-Java 学习之路

我正在尝试将authguard组件中的事件广播到我的标头组件 .

广播服务

@Injectable()
 export class BroadcastService {

 public subject = new Subject<any>();

 sendMessage(message: string) {
  this.subject.next(message);
 }
}

接收器（ Headers 组件）

export class HeaderComponent {
  constructor(public broadcast: BroadcastService) {
    this.broadcast.subject.subscribe(message => {
    alert('broadcast received: ' + message);
   });
 }
}

广播（authguard组件 - 不起作用）

export class AuthGuard implements CanActivate {
 constructor(public broadcast: BroadcastService) {      
 }

 canActivate(): boolean {
  this.broadcast.sendMessage('Hi from AuthGuard');
  return true;
 }
}

广播（仪表板组件 - 工作）

export class DashbardComponent {
 constructor(public broadcast: BroadcastService) {      
 }

 ngOnInit() {
  this.broadcast.sendMessage('Hi from AppComponent');
 }
}

app.component.html

<headerComponent></headerComponent>
<router-outlet></router-outlet>

路由

{
 path: 'dashboard',
 component: DashboardComponent,
 canActivate: [AuthGuard]
}

问题是，当我从我的authguard组件广播时，我的标头组件中的接收器永远不会收到该消息 . 我可以确认每个路径都会调用authGuard中的canActivate方法 .

但是当我从页面组件（例如仪表板）广播时，标头组件中的接收器确实接收到该消息 .

有谁知道如何从authguard发布消息到我的 Headers 组件？

2 回答

你必须使用 BehaviorSubject

这是一个例子

boradcast.service.ts

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

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

  constructor() { }

  public subject = new BehaviorSubject<any>('');

  sendMessage(message: string) {
    this.subject.next(message);

  }

}

这是Stackblitz演示

回复于 2024-05-14T16:54:16+08:00

请使用BehaviorSubject而不是Subject

BehaviorSubject包含一个值 . 订阅时，它会立即发出值 . 主题没有值 .

请检查https://stackoverflow.com/a/43351340/2742156

let bSubject = new BehaviorSubject(null); // null or any default value
bSubject.subscribe(value => {
  console.log("Subscription got", value);
});

订阅者始终接收最后发布的值

更新：

Guard

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private broadcastService: BroadcastService) {}

  canActivate(): boolean {
    console.log('auth guard called');
    this.broadcastService.subject.next('from guard');
    return true;
  }
}

broadcast service

@Injectable()
 export class BroadcastService {

 public subject = new BehaviorSubject<any>('hello');

 sendMessage(message: string) {
  this.subject.next(message);
 }
}

subscriber(header component)

constructor(private broadcastService: BroadcastService) {
broadcastService.subject.subscribe((res) => {
        console.log('Inside login', res);
      });
}

route config

{
    path: 'some route',
    component: SomeComponent,
    canActivate: [AuthGuard]
  }

回复于 2024-05-14T16:54:16+08:00

Angular 5：如何将事件从authguard广播到 Headers ？

2 回答

相关问题