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

Posted 2023-03-07

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

【英文标题】：Angular 7/8 - How to get url parameters in app component

【发布时间】：2020-04-24 13:49:39

【问题描述】：

我有单点登录，但为了测试，我想从 url localhost:4200/?id=test&name=testing&email=[e-mail] 读取值并将它们传递给应用程序组件中的 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,
];

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

【参考方案1】：

你可以这样试试

constructor(
  private activatedRoute: ActivatedRoute
)

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

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

【参考方案2】：

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

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

【参考方案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);
          
      );
    
  
  

【讨论】：

似乎没有任何效果，因为我试图在父组件中获取查询参数。

【参考方案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=[e-mail]。

并找到源代码here。

希望对你有帮助！

【参考方案5】：

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

import  query  from '@angular/animations';

declare var $: any;

【参考方案6】：

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

localhost:4200/?id=test&name=testing&email=[e-mail]

通过这种方式，您可以使用 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/[e-mail]

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

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

【参考方案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)