使用路由器出口时，使用Input属性将值从一个组件传递到另一组件

Question

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

Answer 1

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