CODEWITHSUNDEEP
angular
Ced
Ced

Reputation: 17327

Component dependencies & Using life cycle hooks as logic

The problem : 

  <div class="appContainer">
    <my-cube-container></my-cube-container>
    <my-toolbox></my-toolbox>
  </div>

my-toolbox calls a service inside its constructor. That service A calls another service B and set values into that service. my-cube-container calls service B in its constructor. When my-cube-container calls service B the values aren't initialized.

Possible resolution ?:

Upvotes: 0

Views: 55

Answers (1)

Fabio Antunes
Fabio Antunes

Reputation: 22862

You have several options, keep the things the way they are, but move all the calls to your services into ngInit() all logic should be inside that method and not on the constructor. That will just make your life harder when it comes to testing. After that you could create an observable for the values on service B and make your <my-cube-container></my-cube-container> subscribe to that observable, so it gets notified when those values are available.

Another option would be creating a new component to wrap those two components. So this component will be responsible to feed the data to <my-cube-container> and <my-toolbox> and would look something like this:

<my-wrapper>
  <my-cube-container [values]="serviceBValues"></my-cube-container>
  <my-toolbox (setValues)="setValues($event)"></my-toolbox>
</my-wrapper>

And the ts code would be something like this:

import {Component} from 'angular2/core';

@Component({
  selector: 'my-wrapper',
  template: `
    <my-wrapper>
      <my-cube-container [values]="serviceBValues"></my-cube-container>
      <my-toolbox (setValues)="setValues($event)"></my-toolbox>
    </my-wrapper>
  `
})
export class MyWrapperComponent {
  public serviceBValues;

  constructor(private serviceA: ServiceB, private serviceB: ServiceB)

  setValues(event) {
    console.log(event);
    this.serviceA(event);
    this.serviceBValues = this.serviceB.getValues(); // I guess they will be available by now, if not use promises or observables
  }
}

So <my-wrapper> would be responsible for all the logic and your actual components would be more dummy components who only show your data.

Upvotes: 1

Related Questions