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);
    })

应用程序组件.html

<router-outlet></router-outlet>

app-routing.module.ts

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

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

Answer 1

对于这条路线： 您可以尝试这种方式：

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 2

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

本地主机: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'];
     });

另一种方式是

本地主机：4200/test/testing/testing@test.com

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

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

Answer 3

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

首先，创建一个新组件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）：

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

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

现在您将能够按照以下要求读取参数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 。

并在这里找到源代码。

我希望它有帮助！

Answer 4

Angular 给我们带来了 ActivatedRoute 对象。我们可以以与上面相同的方式访问 URL 参数值，几乎没有区别。这种类型的数据可以通过两种不同的方式访问。一种是通过 route.snapshot.paramMap，另一种是通过 route.paramMap.subscribe。两者之间的主要区别在于订阅将随着该特定路由的参数更改而继续更新。

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

Answer 5

你可以这样尝试

constructor(
  private activatedRoute: ActivatedRoute
)
ngOnInit() {
  this.activatedRoute.paramMap.pipe(
    tap(() => console.log(this.activatedRoute.snapshot.paramMap.get(
      "id"
    )))
  ).subscribe()
}