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

Angular 給我們帶來了 ActivatedRoute 對象。 我們可以以與上面相同的方式訪問 URL 參數值，幾乎沒有區別。 這種類型的數據可以通過兩種不同的方式訪問。 一種是通過 route.snapshot.paramMap，另一種是通過 route.paramMap.subscribe。 兩者之間的主要區別在於訂閱將隨着該特定路由的參數更改而繼續更新。

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

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 。

並在此處找到源代碼。

我希望它有幫助！

Answer 5

你可以這樣試試

constructor(
  private activatedRoute: ActivatedRoute
)

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

如果您需要任何幫助，請告訴我

Answer 6

使用@uirouter/core Transition可以很容易地從 url 獲取參數。

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

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

public constructor(public transition: Transition) {}
}

Answer 7

我在 angular 8 中使用了 jquery，並在 app 組件中聲明后使用 jquery $ 變量獲得了 href。

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

declare var $: any;