learning how to transfer a value between two different components in React

Question

learning how to transfer a value between two different components in React

I have 2 components.

First: component.ts

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})
 export class AppComponent implements OnInit {
    myid: any;
    myappurl: any;
    constructor(private router: Router, private auth: LoginService) {
    }
    ngOnInit() {
        if (this.auth.isAuthenticated()) {
            return true;
        }
        handleOpenURL((appURL: AppURL) => {
            console.log('Got the following appURL', appURL);
            this.myappurl = appURL
            console.log(this.myappurl)
            let url_1 = this.myappurl.toString();
            let url_id = url_1.split("/").reverse()[0];
            this.myid = url_id
            let LS = require("nativescript-localstorage");
            LS.setItem(this.myid)
            this.router.navigateByUrl('/test/resetPasswordRequest', this.myid); //show correct this.myid
        }); 
    console.log('this.myid', this.myid)  // show null

     }
}

.html

<page-router-outlet></page-router-outlet>

Second: another component. I wish to retrieve this.myid and utilize it in a different component.

export class ResetPassIdComponent implements OnInit {
      constructor() {}
      ngOnInit(){
      this.resetPasswordForm = this.fb.group({
      'password': new FormControl('', Validators.required),
      'myid': new FormControl('', Validators.required)
       });
      }
onReset() {
console.log(this.resetPasswordForm.value)
  }
    }

routing.ts

{ path: 'resetPasswordRequest', component: ResetPassIdComponent }

Any suggestions on how to obtain this.myid in ResetPassIdComponent?

Thank you

angular typescript nativescript

Answer 1

Answer №1

If you're looking to update your password, there are two options available: utilize A service or pass it through a specific route.

 this.router.navigate(['/test/resetPasswordRequest', this.myid]);

You can then handle the resolution from another component like this:

export class ResetPassIdComponent implements OnInit {
  constructor(private router:Router) {}
  ngOnInit(){
    let param = this.router.routerState.root.queryParams 
  }
}

Answer 2

If you're looking to update your password, there are two options available: utilize A service or pass it through a specific route.

 this.router.navigate(['/test/resetPasswordRequest', this.myid]);

You can then handle the resolution from another component like this:

export class ResetPassIdComponent implements OnInit {
  constructor(private router:Router) {}
  ngOnInit(){
    let param = this.router.routerState.root.queryParams 
  }
}

Answer 3

Answer №2

If you want to pass an ID using route navigation, make sure to verify that the value of myId is correct before moving to another page.

this.router.navigate(['/test/resetPasswordRequest', this.myid]);

To retrieve it in a different component, you can do the following:

import { ActivatedRoute, Params } from '@angular/router';

export class ResetPassIdComponent implements OnInit {

  id: any

  constructor(
     private route: ActivatedRoute
  ) {}

  ngOnInit(){
     this.route.params.subscribe((params: Params) => { this.id = params['myid']; });
  }
}

Answer 4

If you want to pass an ID using route navigation, make sure to verify that the value of myId is correct before moving to another page.

this.router.navigate(['/test/resetPasswordRequest', this.myid]);

To retrieve it in a different component, you can do the following:

import { ActivatedRoute, Params } from '@angular/router';

export class ResetPassIdComponent implements OnInit {

  id: any

  constructor(
     private route: ActivatedRoute
  ) {}

  ngOnInit(){
     this.route.params.subscribe((params: Params) => { this.id = params['myid']; });
  }
}

learning how to transfer a value between two different components in React

Answer №1

Answer №2

Similar questions

Tips for enhancing the FastifyRequest interface with a new property without erasing existing information in a declaration file

Exploring MongoDB files easily using Angular

An issue has been detected by Zone.js where the ZoneAwarePromise `(window|global).Promise` has been unexpectedly replaced

Best Practices for Architecture and Routing in Angular 8 (suggestions)

What is the best way to iterate over JSON data from an endpoint that contains multiple nested arrays using the .map() method?

Having difficulty incorporating an input value into an Angular function

Change the background color of a MUI ToggleButton based on a dynamic selection

Using TypeScript with Node.js and Sequelize - the process of converting a value to a number and then back to a string within a map function using the OR

The installation process for npm encountered an error when trying to run the [email protected] install script

When zooming out, Leaflet displays both tile layers

How can I utilize Angular services to transfer a count value to the Component?

Tips on refining API response using Angular 2's HTTP module

Encountering difficulty when trying to define the onComplete function in Conf.ts. A type error is occurring, stating that '(passed: any) => void' is not compatible with type '() => void'.ts(2322)'

Angular - Automatically filling in an empty input field upon dropdown selection

How to use sinon to create a mock for an independently imported function

Universal loading screen across all components

Using Angular to parse intricate JSON data

Angular 2 ngIf displaying briefly before disappearing

Tips for addressing the error "Ensure each child in a list has a distinctive 'key' prop" in a React function using TypeScript

How to Programmatically Assign Bootstrap Class to an Element Using Angular 2