0

I have a parent component with the following markup

  <div class="row">
    <div class="col-xs-12">
      <router-outlet>
      </router-outlet>
    </div>
  </div>

I need to set a input property to the component that will be rendered based on the path. Clearly I cannot use the HTML markup to do so.

I cannot use the component resolver as well because my child components extend the parent component to reuse common methods. Webpack complains of circular dependency if I import the child component in the parent class.

In a nutshell, Child Component HTML

<button (click)="dosomething()"></button>
<span>{{sample}}</span>

Child Component TS

@Input() sample: number;
class Child extends parent{
}

Parent Component TS

class Parent{
stateVariable: number;

protected dosomething(){
stateVariable++;

// I need to then pass the state variable to the child component, in this case, the `sample` variable
}
}

This setup works when I have the child component tag instead of a router outlet. Is there any way, i could achieve this?

lohiarahul
  • 1,432
  • 3
  • 22
  • 35
  • from where are you setting the `sample` input object? – Aravind Jan 17 '18 at 05:01
  • No where. That is what I want to do. Can't figure out how to do it. – lohiarahul Jan 17 '18 at 06:19
  • If the child has a direct relationship with the parent you can if it's inside router outlet u should be using a shared service or state management to share the data across application – Aravind Jan 17 '18 at 06:21
  • The problem with shared service is that it is a singleton. I have two different values of `sample` for two different child components. That is why I have made it a part of the parent instead of the shared service. If I do it in the service, I will have to maintain two variables and will have to switch based on what child component is rendered. The number will keep going up as the number of child components increase – lohiarahul Jan 17 '18 at 06:24
  • I think that the only way is using a service and subscribe to observable like https://stackoverflow.com/questions/48069554/how-to-execute-a-function-from-another-component-that-is-not-a-sibling-of-the-fi/48073395#48073395. As the result of observable can be an object, you can make e.g. next({kind:"1",value:200}) and in subscribe ask for kind, and value – Eliseo Jan 17 '18 at 08:31

0 Answers0