Angular 7/8 - 如何在应用程序组件中获取 url 参数

Question

我有单点登录，但为了测试，我想从 url localhost:4200/?id=test&name=testing&email=testing@test.com 读取值并将它们传递给应用程序组件中的 API。

会有一个标志，在此基础上我将从 url 读取而不是使用单点登录功能

if (url_enabled == true) {
    getParamsFromUrl()
 } else {
   singleSignOn()
 }

我尝试了 ActivatedRoute，但它似乎不起作用。

我已经尝试过queryParams, params, url, queryParamsMap，但这些似乎都不起作用。我得到的只是空值。

应用组件内部

app.component.ts

 getParamsFromUrl() {
    this._router.events.subscribe((e) => {
      if (e instanceof NavigationEnd) {
        console.log(e.url)
      }
    })
  }

 this.route.queryParams.subscribe(params => {
      console.log(params);
    })

app.component.html

<router-outlet></router-outlet>

app-routing.module.ts

const routes: Routes = [
  {path:'*/:id', component: AppComponent},
];

我已经尝试了在 stackoverflow 或其他博客上找到的所有内容。有人可以指出我在这里缺少什么吗？

Answer 1

你可以这样试试

constructor(
  private activatedRoute: ActivatedRoute
)

ngOnInit() {
  this.activatedRoute.paramMap
            .pipe(
               tap(console.log(this.activatedRoute.snapshot.paramMap.get(
                        "id"
                   )))
             ).subscribe()
}

如果您需要任何帮助，请告诉我

Answer 2

Angular 为我们提供了 ActivatedRoute 对象。我们可以以与上面相同的方式访问 URL 参数值，几乎没有区别。这种类型的数据可以通过两种不同的方式访问。一种是通过 route.snapshot.paramMap，另一种是通过 route.paramMap.subscribe。两者的主要区别在于订阅会随着特定路由的参数变化而不断更新。

ngOnInit() {
    this.route.paramMap.subscribe(params => {
        this.userType = params.get("userType")
    })
}

Answer 3

对于这条路线： 你可以试试这个方法：

const routes: Routes = [
   {path:'*/:id', component: AppComponent},
];   

在 AppComponent .ts 文件中：

    constructor(
      private activatedRoute: ActivatedRoute,
    ) { }




    ngOnInit() {
      this.activatedRoute.params.subscribe(params => {
          const id = params['id'];
          console.log('Url Id: ',id);
    }

    OR

    ngOnInit() {
      this.activatedRoute.queryParams.subscribe(params => {
          const id = +params.id;
          if (id && id > 0) {
           console.log(id);
          }
      });
    }
  
  

Answer 4

您需要创建一个新组件并更新路由配置，如下所示：

首先，新建一个组件：MainComponent:

import { Component } from '@angular/core';

@Component({
  selector: 'main',
  template: `<router-outlet></router-outlet>`,
})
export class MainComponent {
  constructor() {  }
}

然后，更新您的AppModule：

import { AppComponent } from './app.component';
import { MainComponent } from './main.component';

@NgModule({
  imports:      [ 
    BrowserModule, 
    FormsModule,
    RouterModule.forRoot([
      {path: '', component: AppComponent}
    ])
  ],
  declarations: [ MainComponent, AppComponent ],
  bootstrap:    [ MainComponent ]
})
export class AppModule { }

最后，您需要更新您的index.html 文件（确保加载全新的组件而不是AppComponent）：

<main>loading</main>

现在您可以按照AppComponent 中的要求读取参数：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  params: Params;

  constructor(private route: ActivatedRoute){}

  ngOnInit() {
      this.route.queryParams.subscribe((params: Params) => {
        this.params = params;
        console.log('App params', params);
        const id = params['id'];
        console.log('id', id);
      });
  }
}

在此处查看一个工作示例：https://read-params-app-component.stackblitz.io/?id=test&name=testing&email=testing@test.com。

并找到源代码here。

希望对你有帮助！

Answer 5

我在 Angular 8 中使用了 jquery，并在应用组件中声明它后使用 jquery $ 变量获取了 href。

import { query } from '@angular/animations';

declare var $: any;

Answer 6

首先有一个像你这样的带有 queryParams 的 url：

localhost:4200/?id=test&name=testing&email=testing@test.com

通过这种方式，您可以使用 ActivatedRoute 对象访问查询参数：

 this.name = this.activatedRoute.snapshot.queryParamMap.get('name'); // this.name = 'testing'

或者：

 this.activatedRoute.queryParams.subscribe(params => {
       this.name= params['name'];
     });

另一种方式是

localhost:4200/test/testing/testing@test.com

您用于同步检索（一次）：

this.name = this.activatedRoute.snapshot.ParamMap.get('name');

Answer 7

使用来自@uirouter/core 的Transition 可以很容易地从url 获取参数。

import {Transition} from '@uirouter/core';

@Component()
export class MyComponent {
public myParam = this.transition.params().myParam;

public constructor(public transition: Transition) {}
}