как использовать значение из одного компонента в другой компонент

Question

У меня есть 2 компонента.

Первый: component.ts 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> 

Второй: другой компонент.Я хочу получить this.myid и использовать в другом компоненте.

    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 }

Любая идея, pelase, как получить this.myid в ResetPassIdComponent?

Спасибо

Answer 1

Вы можете использовать навигацию по маршруту для передачи идентификатора.Однако убедитесь, что вы получили правильное значение myId перед маршрутизацией на другую страницу.

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

Чтобы получить его в другом компоненте, вы можете использовать следующее:

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 2

Вы можете, как предлагают другие ответы, передать его с помощью метода маршрутизации.

Вам необходимо определить свой маршрут следующим образом:

...
{ path: '/test/resetPasswordRequest/:id', component: ... }
...

Это говорит стеку маршрутизации.что третий предоставленный сегмент пути является параметром (:thing)

Затем вы можете выполнить маршрутизацию с помощью:

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

, и в вашем втором компоненте вам нужно будет ввести ActivatedRoute и подпишитесь на изменения для параметров:

this.activatedRoute.params.subscribe((params: Params) => {
    console.log('Retrieved ID', params.id)
    this.id = params.id
});

Эта подписка должна происходить в пределах ngOnInit предпочтительно.

Answer 3

Вы можете использовать службу A или передать ее по маршруту

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

и разрешить ее из другого компонента

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