CODEWITHSUNDEEP
angular
rja
rja

Reputation: 169

implementing relevant life cycle hook

I am confused on using relevant lifecycle hook in my angular app. I have two components where i am trying to navigate between this two components.I am able to navigate from first component to second. but when i am trying to navigate from second to first component. It does not work properly. please guide me on this.

I want to send "golbalvaue" variable from secondComponent to FirstComponent and implement a method as soon as "globalvalue" is transfered to the FirstComponent. To acoomplish that which lifecycle hook has to be implemented. I am able to navigate from SecondComponent to FirstComonent. Note: I am able to navigate it to FirstComponent from SecondComponent. The problem is i am not able to access the variable. SecodComponent is intiated only when the an event in the FirstComponent is triggered. After initiation of SecodComponent i want to trigger an event which navigates to the FirstComponent. In which lifecyclehook can i access the variable

First Component

import {Router} from '@angular/router';
globalvalue: string;
testvalue: string;

export class FirstComponent implements OnInit, AfterViewInit {

constructor(private route: Router){}


 ngAfterViewInit() {
    this.globalvalue = this.route.getCurrentNavigation().extras.state.globalvalue;
    this.source.addFilter({field: 'test', search: this.globalvalue});
  }

onChange(event) {
    const testdata = event.data.testdata;
      this.route.navigate(['/components/SecondComponent'], {state: {testvalue: testvalue},  fragment: 'testing'});
  }
 }

Second Component

globalvalue: string;
testvalue: string;

export class FirstComponent implements OnInit, AfterViewInit {

constructor(private route: Router){
this.testvalue = this.router.getCurrentNavigation().extras.state.testvalue;
}

  ngAfterViewInit() {
    this.searchService.onSearchSubmit()
      .subscribe((data: any) => {
        this.globalvalue = data.term;
        this.route.navigate(['/components/First-component'], {state: {globalvalue: this.globalvalue}});
      });
  }

}

Upvotes: 0

Views: 77

Answers (1)

Sivakumar Tadisetti
Sivakumar Tadisetti

Reputation: 5051

You can pass {state: {globalvalue: this.globalvalue}} in route url array itself as second value

this.route.navigate(['/components/First-component', {state: {globalvalue: this.globalvalue}}]);

And then you can access the route parameters from either constructor or ngOninit or your wish ;)

Component from where globalValue will be sent to other route

export class ThirdComponent {
  constructor(
    private router: Router,
  ) {
    this.returnItem();
  }

  returnItem() {
    setTimeout(() => {
      let globalValue = 'Test'
      this.router.navigate(['second', {
        globalValue
      }])
    }, 2000);
  }
}

The component that catches the param value

export class SecondComponent {
  constructor(private route: ActivatedRoute) {
    this.route.params.subscribe(data => {
      this.logValue(data)
    });
  }

  logValue(data) {
    console.log(data);
  }

}

Working stackblitz

Check second and third components in the provided stackblitz

Upvotes: 1

Related Questions