我正在努力捕获由第 3 方 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)
];
如果我删除路线,查询参数就会保留。有什么建议吗?
最佳答案
您可以使用以下解决方案捕获查询婴儿车。
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"];
}
使用它,您将获得 queryParams 的 oauth_token 值。我认为这对你来说似乎不错
如果需要更新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"];
});
}
希望它对您有用。
关于angularjs - Angular2组件路由器: Capture query parameters,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38634148/