我应该如何将数据从我的服务传递到小吃店组件？

Posted 2023-02-23

【中文标题】我应该如何将数据从我的服务传递到小吃店组件？

【英文标题】：How should I pass data from my service to snack bar component?

【发布时间】：2019-02-15 04:40:06

【问题描述】：

我有一个这样创建的快餐栏组件！

import Component, ViewEncapsulation, OnInit, OnDestroy from '@angular/core';
import 
  MatSnackBar,
  MatSnackBarConfig,
  MatSnackBarHorizontalPosition,
  MatSnackBarVerticalPosition,
 from '@angular/material';
import  Subscription  from 'rxjs';


import  AuthenticationService  from "../../services/authentication.service";


@Component(
  selector: 'snack-message',
  templateUrl: './messages.component.html',
  styleUrls: [ './mesaages.component.scss' ],
  encapsulation: ViewEncapsulation.None
)

export class SnackBarMessages implements OnInit, OnDestroy 
  action: boolean = true;
  setAutoHide: boolean = true;
  autoHide: number = 2000;
  horizontalPosition: MatSnackBarHorizontalPosition = 'center';
  verticalPosition: MatSnackBarVerticalPosition = 'bottom';
  private showMessageSub: Subscription;
  messageData: object;

  addExtraClass: boolean = false;

constructor(public snackBar: MatSnackBar, public authenticationService: AuthenticationService) 



ngOnInit() 
  this.messageData = this.authenticationService.getMessageData();
  this.showMessageSub = this.authenticationService.getMessageListener()
      .subscribe(data => 
          this.messageData = data;
      );
   this.openMessageSnackBar(this.messageData);


 openMessageSnackBar(data) 
  let config = new MatSnackBarConfig();
  config.verticalPosition = this.verticalPosition;
  config.horizontalPosition = this.horizontalPosition;
  config.duration = this.setAutoHide ? this.autoHide : 0;
  this.snackBar.open(data.message, data.action, config);
 

 ngOnDestroy() 
   if (this.showMessageSub) 
     this.showMessageSub.unsubscribe();
   
 

我添加了主题并创建了一个订阅，它在我的身份验证服务中侦听 messageListener。然后我用我的 subjectListener 调用我想要传递的数据。我的组件没有接到任何电话。我不明白为什么？这是我的服务！

import  Injectable  from '@angular/core';
import  HttpClient  from '@angular/common/http';
import  Subject  from 'rxjs';
import  Router, ActivatedRoute  from '../../../node_modules/@angular/router';
@Injectable(
  providedIn: 'root'
)

export class AuthenticationService 
  private mesageListener = new Subject<object>();
  private messageData: object;

getMessageListener() 
    return this.mesageListener.asObservable();
  

getMessageData() 
    return this.messageData;
  


createUser(email: string, password: string) 
    const userData: AuthModel =  
      email: email,
      password: password
    
    const requestPath = this.getModes()[`$this.navigatedFrom`];
    this.http.post(`http://localhost:3000/api/$requestPath/signup`,userData)
      .subscribe(response => 
        this.messageData = 
          message: 'Sign Up Successful. Please Login now!',
          action: 'Ok! Got it.'
        
        this.mesageListener.next(this.messageData);
      );
  

【问题讨论】：

谁能帮我解决这个问题！！所以渴望有它的解决方案！

createUser() 方法何时调用？

它是从另一个创建用户的组件调用的，然后我想通过snackbar将注册信息发送给用户！

你需要注入 HttpClient: constructor(private http: HttpClient)

对不起，Dirk，我已经删除了构造函数，因此重点只放在我为小吃店编写的代码上。关键在于，除了组件中的可观察调用之外，一切都在工作。侦听器上的 .next 方法在身份验证服务中被调用，但在快餐栏组件上没有得到任何调用或更新。

【参考方案1】：

尝试使用new BehaviorSubject<object>(null); 作为mesageListener。

您可以在此处查看有关 Subject 和 BehavoiurSubject 的更多详细信息：angular2-difference-between-a-behavior-subject-and-an-observable/

在组件中订阅 Observable 的值。它应该可以工作。