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 }

任何想法，如何在ResetPassIdComponent中获取this.myid？

谢谢

Answer 1

您可以使用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 
  }
}

Answer 2

您可以使用路线导航来传递ID。但是，在路由到另一个页面之前，请确保获取正确的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 3

如其他答案所示，您可以通过基于路由的方法将其传递。

您需要像这样定义路线：

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

这告诉路由堆栈，提供的第三个路径段是参数（:thing）

然后您可以通过以下路线进行布线：

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

在第二个组件中，您需要注入ActivatedRoute并订阅params的更改：

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

此订阅最好在ngOnInit内发生。

如何使用一个组件中的值到另一组件

3 个答案: