วิธีรับพารามิเตอร์ข้อความค้นหาจาก URL ใน Angular 5

ฉันใช้เชิงมุม 5.0.3 ฉันต้องการเริ่มต้นแอปพลิเคชันของฉันด้วยพารามิเตอร์การสืบค้นจำนวน/app?param1=hallo&param2=123มากเช่น ทุกเคล็ดลับที่ให้ไว้ในHow to รับพารามิเตอร์ params จาก url ใน Angular 2 ไม่ได้ผลสำหรับฉัน

แนวคิดใดที่จะทำให้พารามิเตอร์เคียวรีทำงาน

private getQueryParameter(key: string): string {
  const parameters = new URLSearchParams(window.location.search);
  return parameters.get(key);
}

ฟังก์ชั่นส่วนตัวนี้ช่วยให้ฉันรับพารามิเตอร์ของฉัน แต่ฉันไม่คิดว่ามันเป็นวิธีที่เหมาะสมในสภาพแวดล้อมเชิงมุมใหม่

[อัพเดต:] แอพหลักของฉันดูเหมือน

@Component({...})
export class AppComponent implements OnInit {

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // would like to get query parameters here...
    // this.route...
  }
}

ในเชิงมุม 5 params this.route.queryParamsแบบสอบถามที่มีการเข้าถึงโดยการสมัครสมาชิก

ตัวอย่าง: /app?param1=hallo&param2=123

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

ในขณะที่ตัวแปรพา ธ สามารถเข้าถึงได้โดย this.route.snapshot.params

ตัวอย่าง: /param1/:param1/param2/:param2

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    this.param1 = this.route.snapshot.params.param1;
    this.param2 = this.route.snapshot.params.param2;
}

นี่คือทางออกที่สะอาดที่สุดสำหรับฉัน

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

export class MyComponent {
  constructor(
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    const firstParam: string = this.route.snapshot.queryParamMap.get('firstParamKey');
    const secondParam: string = this.route.snapshot.queryParamMap.get('secondParamKey');
  }
}

ฉันรู้ว่า OP ขอวิธีแก้ปัญหา Angular 5 แต่สำหรับคุณทุกคนที่สะดุดคำถามนี้สำหรับรุ่น Angular ที่ใหม่กว่า (6+) อ้างถึงเอกสารที่เกี่ยวข้องกับ ActivatedRoute.queryParams (ซึ่งคำตอบอื่น ๆ ส่วนใหญ่อิง):

สองคุณสมบัติที่เก่ากว่ายังคงมีอยู่ พวกเขามีความสามารถน้อยกว่าการทดแทนท้อแท้และอาจเลิกใช้ในรุ่นแองกูลาร์ในอนาคต

params - Observable ที่มีพารามิเตอร์ที่จำเป็นและเป็นทางเลือกเฉพาะสำหรับเส้นทาง ใช้ paramMap แทน

queryParams - Observable ที่มีพารามิเตอร์เคียวรีที่พร้อมใช้งานสำหรับทุกเส้นทาง ใช้ queryParamMap แทน

ตามเอกสารวิธีที่ง่ายที่สุดในการรับพารามิเตอร์คิวรีจะมีลักษณะดังนี้:

constructor(private route: ActivatedRoute) { }

ngOnInit() {
    this.param1 = this.route.snapshot.paramMap.get('param1');
    this.param2 = this.route.snapshot.paramMap.get('param2');
}

หาวิธีการที่สูงขึ้น (เช่นองค์ประกอบขั้นสูงอีกครั้งการใช้งาน) เห็นนี้บทเอกสาร

แก้ไข:

ตามที่ระบุไว้อย่างถูกต้องในความคิดเห็นด้านล่างคำตอบนี้ไม่ถูกต้อง - อย่างน้อยสำหรับกรณีที่ระบุโดย OP

OP ขอให้รับพารามิเตอร์การสืบค้นทั่วโลก (/ app? param1 = hallo & param2 = 123); ในกรณีนี้คุณควรใช้ queryParamMap (เหมือนกับใน @ dapperdan1985 answer)

ในอีกทางหนึ่ง paramMap ใช้กับพารามิเตอร์เฉพาะเส้นทาง (เช่น / app /: param1 /: param2 ส่งผลให้ / app / hallo / 123)

ขอบคุณ @JasonRoyle และ @daka ที่ชี้ให้เห็น

คุณยังสามารถใช้HttpParamsเช่น:

  getParamValueQueryString( paramName ) {
    const url = window.location.href;
    let paramValue;
    if (url.includes('?')) {
      const httpParams = new HttpParams({ fromString: url.split('?')[1] });
      paramValue = httpParams.get(paramName);
    }
    return paramValue;
  }

import { ParamMap, Router, ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    console.log(this.route.snapshot.queryParamMap);
}

UPDATE

import { Router, RouterStateSnapshot } from '@angular/router';

export class LoginComponent {
    constructor(private router: Router) {
        const snapshot: RouterStateSnapshot = router.routerState.snapshot;
        console.log(snapshot);  // <-- hope it helps
    }
}

มันทำงานให้ฉัน:

constructor(private route: ActivatedRoute) {}

ngOnInit()
{
    this.route.queryParams.subscribe(map => map);
    this.route.snapshot.queryParams; 
}

ดูตัวเลือกเพิ่มเติมรับ params แบบสอบถามจาก url ใน angular2 ได้อย่างไร

Query และ Path Params (Angular 8)

สำหรับ url เช่นhttps://myapp.com/user/666/read?age=23ใช้

import { combineLatest } from 'rxjs';
// ...

combineLatest( [this.route.paramMap, this.route.queryParamMap] )
  .subscribe( ([pathParams, queryParams]) => {
    let userId = pathParams.get('userId');    // =666
    let age    = queryParams.get('age');      // =23
    // ...
  })

UPDATE

ในกรณีที่คุณใช้this.router.navigate([someUrl]);และพารามิเตอร์การสืบค้นของคุณฝังอยู่ในsomeUrlสตริงแล้ว angular เข้ารหัส URL และคุณจะได้รับสิ่งนี้https://myapp.com/user/666/read%3Fage%323-read.phpและการแก้ปัญหาข้างต้นจะให้ผลลัพธ์ที่ผิด ( queryParams จะว่างเปล่าและ params path สามารถติดกับ param พา ธ สุดท้ายหากอยู่บน path path) ในกรณีนี้ให้เปลี่ยนวิธีนำทางไปยังสิ่งนี้

this.router.navigateByUrl(someUrl);

สะดุดคำถามนี้เมื่อฉันกำลังมองหาวิธีการแก้ปัญหาที่คล้ายกัน แต่ฉันไม่ต้องการอะไรเช่นการกำหนดเส้นทางระดับแอปพลิเคชันเต็มรูปแบบหรือโมดูลที่นำเข้าเพิ่มเติม

รหัสต่อไปนี้ทำงานได้ดีสำหรับการใช้งานของฉันและไม่จำเป็นต้องมีโมดูลหรือการนำเข้าเพิ่มเติม

  GetParam(name){
    const results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if(!results){
      return 0;
    }
    return results[1] || 0;
  }

  PrintParams() {
    console.log('param1 = ' + this.GetParam('param1'));
    console.log('param2 = ' + this.GetParam('param2'));
  }

http://localhost:4200/?param1=hello&param2=123 เอาท์พุท:

param1 = hello
param2 = 123

เชิงมุมRouterมีวิธีparseUrl (URL: สตริง)ว่า URL แยกวิเคราะห์ลงในUrlTree หนึ่งในคุณสมบัติของ UrlTree คือ queryParams ดังนั้นคุณสามารถทำ sth เช่น:

this.router.parseUrl(this.router.url).queryParams[key] || '';

น่าเสียดายที่วิธีแก้ปัญหาที่สะอาดที่สุดไม่ใช่วิธีแก้ปัญหาที่ขยายได้มากที่สุด ใน Angular รุ่นล่าสุดขอแนะนำในคำตอบอื่น ๆ ที่คุณสามารถรับ params แบบสอบถามโดยใช้ ActivatedRoute Injectible และใช้ประโยชน์จากคุณสมบัติ snapshot อย่างใดอย่างหนึ่งโดยเฉพาะ:

this.route.snapshot.queryParamMap.get('param')

หรือคุณสมบัติการสมัครสมาชิก (ใช้ในกรณีที่สตริงการสืบค้นจะอัปเดตเช่นการนำทางผ่านรหัสผู้ใช้):

this.route.queryParamMap.subscribe(params => console.log(params));

ฉันมาที่นี่เพื่อบอกคุณว่าการแก้ปัญหาเหล่านี้มีข้อบกพร่องที่อ้าปากค้างที่ไม่ได้รับการแก้ไขในบางครั้ง: https://github.com/angular/angular/angular/issues/12157

ทั้งหมดในทุกวิธีแก้ปัญหากระสุนเพียงอย่างเดียวคือการใช้วานิลลาจาวาสคริปต์ที่ดี ในกรณีนี้ฉันสร้างบริการสำหรับจัดการ URL:

import { Injectable } from '@angular/core';
import { IUrl } from './iurl';

@Injectable()
export class UrlService {
    static parseQuery(url: string): IUrl {
        const query = url.slice(url.indexOf('?')+1).split('&').reduce( (acc,query) => {
            const parts = query.split('=');
            acc[parts[0]] = parts[1];
            return acc;
        }, {});

        return {
            a: query['a'],
            b: query['b'],
            c: query['c'],
            d: query['d'],
            e: query['e']
        }
    }
}

เมื่อคุณมีเส้นทางของวัตถุที่ว่างเปล่าส่วนใหญ่เป็นเพราะคุณไม่ได้ใช้เต้ารับเราเตอร์ใน app.component.html ของคุณ

หากไม่มีสิ่งนี้คุณจะไม่สามารถรับวัตถุเส้นทางที่มีความหมายด้วย subObjects ที่ว่างเปล่าโดยเฉพาะอย่างยิ่ง params & queryParams

ลองเพิ่ม<router-outlet><router-outlet>ก่อนโทร <app-main-component></app-main-component>

ก่อนหน้านั้นตรวจสอบให้แน่ใจว่าคุณเตรียมพารามิเตอร์คิวรีไว้ใน app-routing> ซึ่งส่งออกคลาส Route ที่ใช้โดยองค์ประกอบของแอพ:

param: '/param/:dynamicParam', path: MyMainComponent

แน่นอนสิ่งสุดท้ายที่จะได้รับพารามิเตอร์ของคุณฉันใช้คนthis.route.snapshot.params.dynamicParamที่ dynamicParam เป็นชื่อที่ใช้ในองค์ประกอบเส้นทาง app ของคุณ :)

ระวังเส้นทางของคุณ "redirectTo" จะลบ | วางพารามิเตอร์การสืบค้นใด ๆ

const appRoutes: Routes [
 {path: "one", component: PageOneComponent},
 {path: "two", component: PageTwoComponent},
 {path: "", redirectTo: "/one", pathMatch: full},
 {path: "**", redirectTo: "/two"}
]

ฉันเรียกองค์ประกอบหลักของฉันด้วยพารามิเตอร์การสืบค้นเช่น "/ main? param1 = a & param2 = b และสมมติว่าพารามิเตอร์การสืบค้นของฉันมาถึงวิธีการ" ngOnInit () "ในองค์ประกอบหลักก่อนที่การส่งต่อการเปลี่ยนเส้นทางจะมีผล

แต่นี่เป็นสิ่งที่ผิด การเปลี่ยนเส้นทางจะมาก่อนวางพารามิเตอร์เคียวรีออกและเรียกใช้เมธอด ngOnInit () ในคอมโพเนนต์หลักโดยไม่มีพารามิเตอร์เคียวรี

ฉันเปลี่ยนเส้นทางบรรทัดที่สามเป็น

{path: "", component: PageOneComponent},

และตอนนี้พารามิเตอร์การสืบค้นของฉันสามารถเข้าถึงได้ในองค์ประกอบหลัก ngOnInit และใน PageOneComponent

พบใน: ส่วนประกอบหลักจะได้รับ Params ว่างจาก ActivatedRoute

ทำงานให้ฉัน:

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

@Component({
  selector: 'app-navigation-bar',
  templateUrl: './navigation-bar.component.html',
  styleUrls: ['./navigation-bar.component.scss']
})
export class NavigationBarComponent implements OnInit, OnDestroy {
  private sub: any;
  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit() {
    this.sub = this.router.events.subscribe(val => {
      if (val instanceof RoutesRecognized) {
        console.log(val.state.root.firstChild.params);
      }
    });
  }

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

}

เพิ่งสะดุดกับปัญหาเดียวกันและคำตอบส่วนใหญ่ที่นี่ดูเหมือนจะแก้ปัญหาสำหรับการจัดเส้นทางภายในเชิงมุมแล้วบางส่วนสำหรับพารามิเตอร์เส้นทางซึ่งไม่เหมือนกับพารามิเตอร์คำขอ

ฉันเดาว่าฉันมีกรณีการใช้งานที่คล้ายกับคำถามเดิมโดย Lars

สำหรับฉันกรณีการใช้งานนั้นคือการติดตามการอ้างอิง:

เชิงมุมที่ทำงานบนmycoolpage.comกับกัญชาเส้นทางเพื่อเปลี่ยนเส้นทางmycoolpage.com mycoolpage.com/#/อย่างไรก็ตามสำหรับการอ้างอิงลิงก์เช่นmycoolpage.com?referrer=fooควรใช้งานได้เช่นกัน mycoolpage.com/#/แต่น่าเสียดายที่เชิงมุมทันทีแถบพารามิเตอร์คำขอไปโดยตรงไปยัง

'เคล็ดลับ' ทุกชนิดที่มีการใช้คอมโพเนนต์ว่าง + AuthGuard และรับqueryParamsหรือqueryParamMapทำขออภัยไม่ทำงานสำหรับฉัน พวกเขาว่างเปล่าเสมอ

โซลูชันแฮ็คของฉันจบลงด้วยการจัดการสิ่งนี้ในสคริปต์ขนาดเล็กindex.htmlซึ่งได้รับ URL แบบเต็มพร้อมพารามิเตอร์คำขอ ฉันได้รับค่าพารามิเตอร์ขอผ่านการจัดการสตริงและตั้งค่าบนวัตถุหน้าต่าง บริการแยกจากนั้นจัดการรับ ID จากวัตถุหน้าต่าง

index.html สคริปต์

const paramIndex = window.location.href.indexOf('referrer=');
if (!window.myRef && paramIndex > 0) {
  let param = window.location.href.substring(paramIndex);
  param = param.split('&')[0];
  param = param.substr(param.indexOf('=')+1);
  window.myRef = param;
}

บริการ

declare var window: any;

@Injectable()
export class ReferrerService {

  getReferrerId() {
    if (window.myRef) {
      return window.myRef;
    }
    return null;
  }
}

ทางออกที่ง่าย

 // in routing file
       {
            path: 'checkout/:cartId/:addressId',
            loadChildren: () => import('./pages/checkout/checkout.module').then(m => m.CheckoutPageModule)
          },

    // in Component file

            import { Router, ActivatedRoute } from '@angular/router';

                 constructor(
                      private _Router: ActivatedRoute
                  ) { }

                  ngOnInit() {
                    this.cartId = this._Router.snapshot.params.cartId;
                    this.addressId = this._Router.snapshot.params.addressId;
                    console.log(this.addressId, "addressId")
                    console.log(this.cartId, "cartId")
                  }

http: // localhost: 4200 / สั่งซื้อสินค้า = นิยม

เราสามารถเข้าถึงพารามิเตอร์คำสั่งซื้อเช่นนี้:

this.route.queryParams
      .filter(params => params.order)
      .subscribe(params => {
        console.log(params)// {order: "popular"}

        this.order = params.order;
        console.log(this.order); // popular
      });
  }

นอกจากนี้ยังมี queryParamMap ซึ่งส่งคืนวัตถุที่สังเกตได้ด้วยวัตถุ paramMap

รับ URL เส้นทางต่อไปนี้:

http: // localhost: 4200 / สั่งซื้อสินค้า = นิยมและกรอง = ใหม่

this.route.queryParamMap.subscribe(params => {
  this.orderObj = {...params.keys, ...params};
});

แหล่งที่มา - https://alligator.io/angular/query-parameters/

ที่ฉันคิดว่าเชิงมุม 8:

ActivatedRoute.paramsถูกแทนที่ด้วยActivatedRoute.paramMap ActivatedRoute.queryParamsถูกแทนที่ด้วย ActivatedRoute.queryParamMap

/*
Example below url with two param (type and name) 
URL : http://localhost:4200/updatePolicy?type=Medicare%20Insurance&name=FutrueInsurance
*/ 
  constructor(private route: ActivatedRoute) {
    //Read url query parameter `enter code here`
  this.route.queryParams.subscribe(params => {
    this.name= params['type'];
    this.type= params['name'];
    alert(this.type);
    alert(this.name);

 });

  }

หากคุณไม่ได้ใช้เชิงมุมลองเราเตอร์querystring ติดตั้ง

npm install --save querystring

โครงการของคุณ ในองค์ประกอบของคุณทำอะไรแบบนี้

import * as qs from 'querystring';
...
ngOnInit() {
   const params = qs.parse(window.location.search.substring(1));
   ...
}

substring(1)เป็นสิ่งจำเป็นเพราะถ้าคุณมีบางสิ่งบางอย่างเช่นนี้'/mypage?foo=bar'แล้วชื่อคีย์สำหรับจะเป็น?foo