如何从 Angular 中的重定向 URL 获取 QueryParams

Question

我有一个特定的 url，我必须重定向用户进行身份验证，我会得到一个代码作为查询参数。

假设我将用户重定向到http://someurl.com，它将被重定向到另一个网址，我将获取代码作为查询参数，例如http://anotherurl.com?code=1234

所以我使用window.location.href="http://someurl.com" 来重定向用户 但是如何在 Angular 中获取此代码？

Answer 1

将路由器重定向到另一个路由： 我们可以将路由器配置为默认重定向到命名路由：

    export const routes: Routes = [
  { path: '', redirectTo: 'component-one', pathMatch: 'full' },
  { path: 'component-one', component: ComponentOne },
  { path: 'component-two', component: ComponentTwo }
];

读取路由参数：

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

@Component({
  selector: 'product-details',
  template: `
    <div>
      Showing product details for product: {{id}}
    </div>
  `,
})
export class LoanDetailsPage implements OnInit, OnDestroy {
  id: number;
  private sub: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       this.id = +params['id']; // (+) converts string 'id' to a number

       // In a real app: dispatch action to load the details here.
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

Answer 2

in Routing file define routes like below
const routes: Routes = [
  {path: 'planner', component: PlannerTrackerComponent },
  {path: '' ,  component: PlannerTrackerComponent },
  {path: 'planner/:id' , component: PlannerTrackerComponent}
];

in Ts file :
 constructor(private activeRoute: ActivatedRoute) { }
 ngOnInit() {
    this.activeRoute.queryParams.subscribe(params => {
      this.id = params['id'];
    });
  }

Answer 3

使用 ActivatedRoute 你可以得到这样的查询参数

code: string;
constructor(private route: ActivatedRoute) {
   console.log('Called Constructor');
    this.route.queryParams.subscribe(params => {
        this.code = params['code'];
    });
}