Angular2组件路由器：捕获查询参数-Java 学习之路

我正在努力捕获第三方API传递给我的angular2应用程序的URL查询字符串参数 . 该URL读取http://example.com?oauth_token=123

如何在组件内捕获“oauth_token”的值？我很高兴使用组件路由器进行基本路由，它只是查询字符串 . 我做了几次尝试，我的最新接收组件看起来像

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
    template: ''
})
export class TwitterAuthorisedComponent implements OnInit {

    private oauth_token:string;

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        console.log('the oauth token is');
        console.log( this.route.snapshot.params.oauth_token );
    }
}

任何建议表示赞赏 .

**更新

如果我注释掉所有路由，那么查询参数将会坚持，当我包含路由时，查询参数将在页面加载时被删除 . 下面是我的路线文件的精简副本，其中包含一条路线

import {NavigationComponent} from "./navigation/components/navigation.component";
import {TwitterAuthorisedComponent} from "./twitter/components/twitter-authorised.component";

import { provideRouter, RouterConfig } from '@angular/router';

export const routes: RouterConfig = [
    { path: '', component: TwitterAuthorisedComponent }
];

export const appRouterProviders = [
    provideRouter(routes)
];

如果我删除路由查询参数保持不变 . 有什么建议？

3 回答

我可以使用波纹管解决方案捕获查询婴儿车 .

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

queryParams:string;

constructor(private router: Router, private actRoute: ActivatedRoute) 
{
    this.queryParams=
    this.router.routerState.snapshot.root.queryParams["oauth_token"];
}

使用此方法，您将获得oauth_token到queryParams的值 . 我觉得这对你来说很好

如果您需要更新值queryParams，请查询参数更改，您需要添加更多代码 . 它如下 .

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

    queryParams:string;
    sub:any;

    constructor(private router: Router, private actRoute: ActivatedRoute) 
    {
        this.queryParams=
        this.router.routerState.snapshot.root.queryParams["oauth_token"];
    }

   ngOnInit(){
    this.sub = this.router.routerState.root.queryParams.subscribe(params => {
      this.queryParams = params["oauth_token"];
    });
    }

希望它能为你效劳 .

回复于 2024-04-28T15:41:12+08:00

查询参数可以通过 Router 服务获得 .

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
    template: ''
})
export class TwitterAuthorisedComponent implements OnInit {

    private oauth_token:string;

    constructor(private router: Router) {}

    ngOnInit() {
        console.log('the oauth token is');
        console.log( this.router.routerState.snapshot.queryParams.oauth_token );
    }
}

回复于 2024-04-28T15:41:12+08:00

你可以这样做

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
    template: ''
})
export class TwitterAuthorisedComponent implements OnInit {

    sub: any; //new line added
    private oauth_token:string;

    constructor(private router: Router) {}

    ngOnInit() {

    this.sub = this.route.params.subscribe(params => {
        let id = +params['oauth_token'];

        console.log('the oauth token is');
        console.log(id);
    });


    }
}

希望这会有所帮助 . 谢谢

回复于 2024-04-28T15:41:12+08:00

Angular2组件路由器：捕获查询参数

3 回答

相关问题