代码之家 › 专栏 › 技术社区 › Guilherme Caixeta

将基本组件中的可观察变量值传递给子组件-角度5

angular5 observable angular

0

Guilherme Caixeta · 技术社区 · 8 年前

因此,我有一个基本组件,在它的构造函数中有一个可观察的组件,一旦在另一个组件中接收到值,就会得到一个值,该值将验证用户数据。但是,当尝试在子类中获取此值时,数据到达时是未定义的。下面是我遇到的问题代码:

我的观察对象:

@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();
    }

此处可观察设置:

 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传递给子组件类的值。注意:据我所知,它是最后一个要加载的组件,如何使它在屏幕的其他组件之前加载?

2 回复 | 直到 8 年前

1

0

user6749601 user6749601 8 年前

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

代码的这个简短版本可以工作,因为订阅发生在构造函数中,而“填充”发生在ngOnInit()中:

private perfilLotado: any;

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

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

2

0

Guilherme Caixeta 8 年前

是的,这或多或少是一样的,但是,数据是在执行这部分代码之前填充的,所以我只能在执行完所有代码之后才能捕捉到它。然后我就可以用 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