通信组件的服务仅适用于一个

Question

创建一个服务来通知我的组件对 'idCustomer' 的任何更改。我想在属性发生变化时执行一些操作。这些动作必须在不同的组件中完成。我做了一个 console.log 来知道是否收到了更改。但它只显示了一个组件的消息。我是 angular 的新手，如果有更有效的方式来传达 'idCustomer'，我将不胜感激。部门和客户是兄弟姐妹。

登录服务

  idCustomerChanged = new Subject<string>();
  
  constructor(private http: HttpClient) { }

  login(requestBody: any): Observable<ResponseBody> {
    return this.http.post<ResponseBody>(`${this.apiServerUrl}/Customer/GetCustomerLogin`, requestBody);
  }

  addIdCustomer(idCustomer: string) {
    this.idCustomer = idCustomer;
    this.idCustomerChanged.next(this.idCustomer);
  }
  removeIdCustomer() {
    this.idCustomer = '';
    this.idCustomerChanged.next(this.idCustomer);
  }

  getIdCustomer() {
    return this.idCustomer;
  }

LoginComponent（更改 'idCustomer'）

submit() {
    if (this.form.valid) {
      this.loginService.login(this.form.value).subscribe((response) => {
        if (response.data) {
          this.loginService.addIdCustomer(response.data[0].idCustomer);
          this.router.navigate(['/products']);         
        } else {
          this.error = 'Invalid Credentials';
        }      
      });
    }
}

NavBarComponent（显示消息）

  idCustomer: string = '';
  subscription: Subscription;

  constructor(private loginService: LoginService, private router: Router) {
    this.subscription = this.loginService.idCustomerChanged.subscribe((idCustomer) => {
      this.idCustomer = idCustomer;
      console.log(this.idCustomer + ' from nav-bar');
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

CustomerComponent（这不是）

  idCustomer: string = '';
  submenusCustomer = ['Profile', 'History', 'Account Payables'];
  subscription: Subscription;

  constructor(private loginService: LoginService) {
    this.subscription = this.loginService.idCustomerChanged.subscribe((idCustomer) => {
      this.idCustomer = idCustomer;
      console.log(this.idCustomer + ' from customer-page');
    });
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

SectionComponent（这个不是）

  idCustomer: string = '';
  subscription: Subscription;

  constructor(private loginService: LoginService) {
    this.subscription = this.loginService.idCustomerChanged.subscribe((idCustomer) => {
      this.idCustomer = idCustomer;
      console.log(this.idCustomer + ' from seccion-page');
    });
  }

  ngOnInit(): void {

  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

Answer 1

最好将其他变量 return 添加为可观察的主题：在您的登录服务之上和定义您的主题之后：

  idCustomerChanged = BehaviorSubject<any>({})<string>();
//new
idCustomerChanged$:Observable = idCustomerChanged.asObservable();

//// 在您的 CustomerComponent 和其他组件上：

 idCustomerChanged$:Observable;//declare your observable;
    constructor(private loginService: LoginService) {
    this.idCustomerChanged$ = this.loginService.idCustomerChanged$
        this.subscription = this.idCustomerChanged.subscribe((idCustomer) => {
          this.idCustomer = idCustomer;
          console.log(this.idCustomer + ' from seccion-page');
        });
      }

通信组件的服务仅适用于一个

Service to communicate components only works on one

typescript

angular