Question

我在角度上很新。

我已经创建了以下一项服务。

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

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

  constructor() { }

  private txtBxServiceID=new Subject<any>();

  setTxtBxServiceID(value:any){
    this.txtBxServiceID.next({txtBxServiceID:value});
  }

  getTxtBxServiceID(): Observable<any> {
    return this.txtBxServiceID.asObservable();
  }


}

我正在表单提交的另一个组件中设置txtBxServiceID值。在下面给出。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from  '@angular/forms';
import { Router } from  '@angular/router';
import {WizardDataService} from '../services/wizard-data.service'

@Component({
  selector: 'app-discover-device',
  templateUrl: './discover-device.component.html',
  styleUrls: ['./discover-device.component.scss']
})
export class DiscoverDeviceComponent implements OnInit {

  discoverDeviceComponentForm: FormGroup;
  isSubmitted  =  false;

  constructor(private router: Router, private formBuilder: FormBuilder,private wizardDataService : WizardDataService) { }

  ngOnInit() {
    this.discoverDeviceComponentForm  =  this.formBuilder.group({
      txtBxServiceID: ['',  Validators.required]
  });
  }
  get formControls() { return this.discoverDeviceComponentForm.controls; }

  dicoverDevice(){
    this.isSubmitted=true;
    if(this.discoverDeviceComponentForm.invalid){
      return;
    }
    this.wizardDataService.setTxtBxServiceID(this.discoverDeviceComponentForm.value.txtBxServiceID);

    this.router.navigateByUrl('mits-update/device-details');
  }
}

现在我正在尝试访问另一个组件上的服务。如下所示。

import { Component, OnInit} from '@angular/core';
import {WizardDataService} from '../services/wizard-data.service';


@Component({
  selector: 'app-device-mits-update',
  templateUrl: './device-mits-update.component.html',
  styleUrls: ['./device-mits-update.component.scss']
})
export class DeviceMitsUpdateComponent implements OnInit {

  txtBxServiceID:any="";

  constructor(private wizardDataService:WizardDataService) {

   this.wizardDataService.getTxtBxServiceID().subscribe(value =>{
      this.txtBxServiceID=value.txtBxServiceID;
    });
  }

  ngOnInit() {
  }

}

然后我在HTML上显示此值，例如

 <td>Service Id</td>
        <td>{{txtBxServiceID}} </td>

我的问题是该值未在此处显示。那么，有人可以在这里帮助我找到我在这里犯的错误吗？

Answer 1

根据丹尼尔（Daniel）的建议，您可以使用BehaviorSubject。但是，它需要一个初始值。由于您没有提供任何值，因此可以使用ReplaySubject。

private txtBxServiceID = new ReplaySubject<any>(1);

Answer 2

您有一个简单的Subject。仅在第一个组件设置了值之后，您才能在新组件中订阅它。 Subject不会向新订户重播以前的值。它还不保存最新值，并将其发送给新订户。

很可能您想要一个BehaviorSubject，它将存储最新的值并将其发送给新的订户。

如果要将 all 个以前的值发送给新订阅者，则需要使用ReplaceSubject。

因此，请使用以下代码代替现在的代码：

private txtBxServiceID = new BehaviorSubject<any>(null);

Angular Observable＆Subject无法获取数据

2 个答案: