将 Observable 的值传递给基本组件中的变量到子组件 - Angular 5答案

【问题标题】：Passing value of Observable to variable in Base Component to child component - Angular 5将 Observable 的值传递给基本组件中的变量到子组件 - Angular 5
【发布时间】：2018-09-04 20:31:55
【问题描述】：

所以我有一个基础组件，在它的构造函数中我有一个 observable，一旦它在另一个验证用户数据的组件中被接收到，就可以获取一个值。但是，当尝试在子类中获取此值时，数据到达时未定义。在我遇到问题的代码下方：

我的观察者：

@Injectable()
export class ObservableUsuario implements ObservableUtil {
    subject = new Subject<any>();
    setUsuario(variable: any) {
        this.subject.next({ text: variable });
    }

    clearUsuario() {
        this.subject.next();
    }

    getUsuario(): Observable<any> {
        return this.subject.asObservable();
    }

这里 observable 设置了：

 getValue = (refresh: boolean = true) => cacheable(
    () => this.http.get(`${environment.apiEndpoint}/api/Get/Value`, headers()).map(res => {
      this.observableUser.setUsuario(res.json());
      return res.json();
    }),
  );

基础组件：

//more code
       perfilLotado: any;
        constructor(
            public observableUser: ObservableUsuario
        ) {
            this.observableUser.getUsuario().subscribe(
                perfil => this.perfilLotado = perfil.text.lotacaoDTO[0].perfilDTO[0].nome);
        }
//more code

子组件：

   export class BaseListComponent extends BaseComponent {

        NgOnInit(){}

        validAction(situacao: number): any {
//Here appearer like undefined...
            console.log(this.perfilLotado);
            if (this.sistema.situacaoRestric[situacao] != undefined) {
                this.showMsg('warn', 'Mensagem de Alerta', this.sistema.situacaoRestric[situacao]);
                return false;
            } else if (this.sistema.situacaoRestric[situacao] == undefined && this.sistema.perfilRestrict[this.perfilLotado] != undefined) {
                this.showMsg('warn', 'Mensagem de Alerta', this.sistema.perfilRestrict[this.perfilLotado]);
                return false;
            } else if (this.sistema.situacaoRestric[situacao] == undefined && this.sistema.perfilRestrict[situacao] == undefined) {
                return true;
            }
        }

换句话说，我的问题是将我的 observable 传递的值加载到子组件类。注意：据我了解，它是加载的最后一个组件，我怎样才能让它在屏幕的其他组件之前加载？

【问题讨论】：

尝试将订阅 observable 的代码移动到 ngOnInit
谁调用“getValue()”以及何时调用？
@Ricardo，我尝试但不工作......
@DiabolicWords 在基础组件的构造函数中。加载时。
在我看来，validAction 应该从 perfilLotado 的 observable 中读取，你应该在那里订阅和管理你的逻辑

标签： angular observable angular5

【解决方案1】：

根据您的描述，您的问题是，您订阅了该服务并并行尝试从构造函数中填充数据。你在某种竞赛条件下跑步。我自己测试过。如果您订阅了您的构造函数，但从 ngOnInit() 中调用了服务的 setUsuario() 方法，那么当调用 validAction() 时，您的值就足够了。

您的代码的这个缩短版本有效，因为订阅发生在构造函数中，而“填充”稍后发生在 ngOnInit() 中：

private perfilLotado: any;

constructor(private observableUsuario: ObservableUsuario) {
    this.observableUsuario.getUsuario().subscribe(
        perfil => {
            this.perfilLotado = perfil;
        });
}

ngOnInit(): void {
    this.observableUsuario.setUsuario('TEST');
}

【讨论】：

【解决方案2】：

是的，差不多是一样的，但是数据在这部分代码执行之前就已经填充好了，所以我只能在所有代码执行之后才能捕捉到它。然后我能够使用BehaviorSubject 解决，将它与其他Subject 一起设置无服务。因为我需要这两个不同的点，但作为一个错误，我将不得不离开，直到我解决问题。

按照我在 observable 中使用的代码：

@Injectable()
export class bObservableUsuario {

  private messageSource = new BehaviorSubject<any>("");
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(obj: any) {
    this.messageSource.next(obj)
  }

服务：

  GetData = (refresh: boolean = true) => cacheable(
    () => this.http.get(`${environment.apiEndpoint}/api/get/data`, headers()).map(res => {
//for now i need two observers here :(..
      this.observableUser.setUsuario(res.json());
//this bObservable solve my problems
      this.bObservable.changeMessage({obj: res.json()});
      return res.json();
    }),

子组件：

@Component({ template: '' })
export class BaseListComponent extends BaseComponent {
    init() {
        this.bObservale.currentMessage.subscribe(d => this.perfilLotado = d.obj);

    }
///more code

【讨论】：