Within my application's structure, I am faced with the task of facilitating communication between a parent component and several child components.
- When a user interacts with Child1Component by clicking on it, there is a need to transmit certain data from Child1Component to Child2Component.
- The objective is then to showcase this transmitted data within Child2Component.
My approach:
I attempted to send out values from Child1 to the parent component, and then endeavored to pass along this same value from the parent component to Child2.
However, upon inspecting the ngOnInit method in Child2Component, I found that the value was not being successfully received. The ultimate goal is to have this data properly displayed within Child2.
In addition, an issue has arisen where the navigation to Child2 does not consistently function as desired; after briefly displaying Child2 for just a second or two, the page unexpectedly redirects to the login screen.
Child1: <div (click)="onClickData(data)"></div> @Output() getData = new EventEmitter(); onClickData (data:any) { this.getData.emit(data); } Child2: @Input() clickedItem: any = ''; ngOnInit() { alert(this.clickedItem) } Parent: <app-child1 (getdata)="getDataEvent($event)" > </app-child1> <app-child2 [clickedItem] = "clickedData" > </app-child2> clickedData:any; getDataEvent($event: any) { this.clickedData = $event; this.router.navigate(['child2']) }