1

I have my parent component where the is defined to display other component(childComponent) when the route changes, I want to pass a value from parentComp to childComp, usually we include the selector in place of router-outlet if we don't use routes and pass using @Input property. How can I achieve the same when using routes

ParentComponent

@Component({
    selector : 'parent',
    template : `<h1>Home</h1>
            <router-outlet test1="test"></router-outlet>
    `,
})
export class parentComp{
    test = "testing";
}

ChildCompoent

@Component({
    selector : 'child',
    template : `<h2>Home</h2>
    `,
})
export class childComp implements onChanges, onInit{
    @Input() test1;
    ngOnChanges(){
        console.log(this.test1);
    }
ngOnInit(){
            console.log(this.test1);
}
}

I want to get the value of test1 from parent to child component and print in console using @Input property.

I'm getting the value of test1 as undefined when printing the value in console

praveen
  • 489
  • 6
  • 12

1 Answers1

2

You cannot define an @Input() variable for a router-outlet.

Instead you have the following as alternative options

  • Use Route params
  • Use Query params
  • Shared service to share the data
  • State Management using redux tools
Aravind
  • 40,391
  • 16
  • 91
  • 110
  • Is there any way doing this using Input property – praveen Jul 02 '17 at 02:55
  • No. if you are using `router-outlet` its not possible. Refer this [**answer**](https://stackoverflow.com/questions/44864303/sending-data-with-route-navigate-in-angular-2/44865817#44865817) for alternative options. – Aravind Jul 02 '17 at 02:56
  • @DeborahK the above answer is valid one or did I miss any – Aravind Jul 02 '17 at 05:08