วิธีรับพารามิเตอร์แบบสอบถามจาก url ใน Angular 2

ฉันใช้ angular2.0.0-beta.7 เมื่อองค์ประกอบที่มีการโหลดบนเส้นทางเช่นมันจะถูกเปลี่ยนเส้นทางไปยัง/path?query=value1 /pathทำไม GET params ถูกนำออก? ฉันจะรักษาพารามิเตอร์ไว้ได้อย่างไร?

ฉันมีข้อผิดพลาดในเราเตอร์ ถ้าฉันมีเส้นทางหลักเช่น

@RouteConfig([
  {
      path: '/todos/...',
      name: 'TodoMain',
      component: TodoMainComponent
  }
])

และเส้นทางลูกของฉันเช่น

@RouteConfig([
  { path: '/', component: TodoListComponent, name: 'TodoList', useAsDefault:true },
  { path: '/:id', component: TodoDetailComponent, name:'TodoDetail' }
])

จากนั้นฉันไม่สามารถรับพารามิเตอร์ใน TodoListComponent ฉันสามารถที่จะรับ

params("/my/path;param1=value1;param2=value2") 

แต่ฉันต้องการความคลาสสิค

query params("/my/path?param1=value1&param2=value2")

ด้วยการฉีดอินสแตนซ์ของสิ่งActivatedRouteหนึ่งสามารถติดตามความหลากหลายของสิ่งที่สามารถสังเกตได้รวมถึง a queryParamsและสิ่งที่paramsสังเกตได้:

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

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

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    // Note: Below 'queryParams' can be replaced with 'params' depending on your requirements
    this.activatedRoute.queryParams.subscribe(params => {
        const userId = params['userId'];
        console.log(userId);
      });
  }

}

หมายเหตุเกี่ยวกับการปฏิเสธความรับผิดชอบ

@Reto และ @ codef0rmer ได้ชี้ให้เห็นอย่างถูกต้องว่าตามเอกสารอย่างเป็นทางการแล้ววิธีการunsubscribe()ในส่วนประกอบonDestroy()ไม่จำเป็นในกรณีนี้ สิ่งนี้ถูกลบออกจากตัวอย่างรหัสของฉัน (ดูช่องการแจ้งเตือนสีน้ำเงินในบทช่วยสอนนี้ )

เมื่อ URL เช่นนี้ http://stackoverflow.com?param1=value

คุณสามารถรับ param1 ด้วยรหัสตาม:

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

@Component({
    selector: '',
    templateUrl: './abc.html',
    styleUrls: ['./abc.less']
})
export class AbcComponent implements OnInit {
    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        // get param
        let param1 = this.route.snapshot.queryParams["param1"];
    }
}

แม้ว่าคำถามระบุรุ่นเบต้า 7คำถามนี้ขึ้นมาเป็นผลการค้นหาบน Google สำหรับวลีที่เหมือนกันเช่นเชิงมุม 2 พารามิเตอร์การค้นหา ด้วยเหตุนี้นี่คือคำตอบสำหรับเราเตอร์ใหม่ล่าสุด (ในปัจจุบัน alpha.7 )

วิธีการอ่านพารามิเตอร์มีการเปลี่ยนแปลงอย่างมาก ก่อนอื่นคุณต้องฉีดการพึ่งพาที่เรียกRouterในพารามิเตอร์ตัวสร้างของคุณเช่น:

constructor(private router: Router) { }

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

this.router
  .routerState
  .queryParams
  .subscribe(params => {
    this.selectedId = +params['id'];
  });

ในตัวอย่างนี้เราอ่านid param idจาก URL example.com?id=41เช่น

ยังมีบางสิ่งที่สังเกตเห็น:

1. การเข้าถึงคุณสมบัติของparamsLike params['id']จะส่งคืนสตริงเสมอและสิ่งนี้สามารถแปลงเป็นตัวเลขได้โดย prefixing +ด้วย
2. เหตุผลที่ทำให้การสืบค้นพารามิเตอร์ดึงข้อมูลได้ด้วยการสังเกตคือช่วยให้สามารถใช้อินสแตนซ์องค์ประกอบเดียวกันได้อีกครั้งแทนที่จะโหลดขึ้นมาใหม่ แต่ละครั้งที่พารามิเตอร์การค้นหาเปลี่ยนแปลงจะทำให้เกิดเหตุการณ์ใหม่ที่เราสมัครเป็นสมาชิกและทำให้เราสามารถตอบสนองต่อการเปลี่ยนแปลงตามลำดับ

ฉันชอบคำตอบของ @ StevePaul จริง ๆ แต่เราสามารถทำเช่นเดียวกันได้โดยไม่ต้องโทรออก / ยกเลิกการเป็นสมาชิกภายนอก

import { ActivatedRoute } from '@angular/router';
constructor(private activatedRoute: ActivatedRoute) {
    let params: any = this.activatedRoute.snapshot.params;
    console.log(params.id);
    // or shortcut Type Casting
    // (<any> this.activatedRoute.snapshot.params).id
}

ในการส่ง params แบบสอบถาม

import { Router } from '@angular/router';
this.router.navigate([ '/your-route' ], { queryParams: { key: va1, keyN: valN } });

เพื่อรับ params แบบสอบถาม

import { ActivatedRoute } from '@angular/router';
this.activatedRoute.queryParams.subscribe(params => {
    let value_1 = params['key'];
    let value_N = params['keyN'];
});

แหล่งข้อมูลอย่างเป็นทางการ

สวัสดีคุณสามารถใช้ URLSearchParams คุณสามารถอ่านเพิ่มเติมได้ที่นี่

การนำเข้า:

import {URLSearchParams} from "@angular/http";

และฟังก์ชั่น:

getParam(){
  let params = new URLSearchParams(window.location.search);
  let someParam = params.get('someParam');
  return someParam;
}

ประกาศ : ระบบนี้ไม่รองรับทุกแพลตฟอร์มและดูเหมือนว่าจะอยู่ในสถานะ "EXPERIMENTAL" โดยเอกสารเชิงมุม

ก่อนอื่นสิ่งที่ฉันได้พบกับการทำงานกับ Angular2 คือ URL ที่มีสตริงแบบสอบถามจะเป็น /path;query=value1

หากต้องการเข้าถึงในองค์ประกอบที่คุณใช้ดังนั้นนี่คือตอนนี้ แต่ตามบล็อกรหัส:

    constructor(params: RouteParams){
    var val = params.get("query");
    }

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

อ่านเกี่ยวกับการกำหนดเส้นทางด้วยสตริงการสืบค้นและ params ในบทเรียน Angular2 ที่https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

คุณสามารถรับพารามิเตอร์การสืบค้นเมื่อส่งผ่าน URL โดยใช้ ActivatedRoute ตามที่ระบุไว้ด้านล่าง: -

url: - http: /domain.com? test = abc

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

@Component({
  selector: 'my-home'
})
export class HomeComponent {

  constructor(private sharedServices : SharedService,private route: ActivatedRoute) { 
    route.queryParams.subscribe(
      data => console.log('queryParams', data['test']));
  }

}

รับพารามิเตอร์ URL เป็นวัตถุ

import { Router } from '@angular/router';
constructor(private router: Router) {
    console.log(router.parseUrl(router.url));
}

ถ้าคุณต้องการที่จะได้รับพารามิเตอร์การค้นหาครั้งวิธีที่ดีที่สุดคือการใช้ใช้วิธีการเพื่อให้คุณไม่ต้องกังวลเกี่ยวกับการยกเลิก นี่คือตัวอย่างง่ายๆ: -

constructor(private route: ActivatedRoute) {
  route.snapshot.queryParamMap.take(1).subscribe(params => {
     let category = params.get('category')
     console.log(category);
  })
}

หมายเหตุ:ลบtake (1)หากคุณต้องการใช้ค่าพารามิเตอร์ในอนาคต

ตอนนี้มันเป็น:

this.activatedRoute.queryParams.subscribe((params: Params) => {
  console.log(params);
});

ฉันหวังว่ามันจะช่วยคนอื่น

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

ไม่มีใครที่นี่กล่าวถึงเกี่ยวกับ snapshot.paramMap.get จากเอกสารที่เป็นทางการ

this.route.snapshot.paramMap.get('id')

ดังนั้นก่อนที่จะส่งมันเพิ่มสิ่งนี้ในการส่ง / การกำกับส่วนประกอบ:

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

จากนั้นสั่งใหม่เป็นอย่างใดอย่างหนึ่ง (จัดทำเป็นเอกสารไว้ที่นี่ ):

this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);

หรือเพียงแค่:

this.router.navigate(['/heroes', heroId ]);

ตรวจสอบให้แน่ใจว่าคุณได้เพิ่มสิ่งนี้ไว้ในโมดูลการเราต์ตามที่บันทึกไว้ที่นี่ :

 { path: 'hero/:id', component: HeroDetailComponent }

และในที่สุดในองค์ประกอบของคุณซึ่งจำเป็นต้องใช้พารามิเตอร์การสืบค้น

• เพิ่มการนำเข้า (มีเอกสารที่นี่ ):

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

• ฉีด ActivatedRoute

(เอกสารยังนำเข้า switchMap และฉีดเร้าเตอร์และ HeroService - แต่จำเป็นสำหรับทางเลือกที่สังเกตได้เท่านั้น - ไม่จำเป็นเมื่อคุณใช้สแนปชอตทางเลือกเช่นในกรณีของเรา):

    constructor(
      private route: ActivatedRoute
    ) {}

• และรับค่าที่คุณต้องการ (จัดทำเป็นเอกสารไว้ที่นี่ ):

  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
  }

หมายเหตุ: หากคุณเพิ่มโมดูลการเดินทางไปยังโมดูลคุณสมบัติ (แสดงให้เห็นในเอกสาร) ให้แน่ใจว่าใน APP.MODULE.ts ที่โมดูลการเดินทางมาก่อน AppRoutingModule (หรือไฟล์อื่น ๆ ที่มีเส้นทางแอประดับราก) ในการนำเข้า: [] เส้นทางคุณสมบัติอื่นจะไม่พบ (ตามที่พวกเขาจะมาหลังจาก {เส้นทาง: '**', redirectTo: '/ ไม่พบ'} และคุณจะเห็นข้อความที่ไม่พบเท่านั้น)

คุณเพียงแค่ต้องฉีด ActivatedRoute ในคอนสตรัคเตอร์จากนั้นก็เข้าถึง params หรือ queryParams

constructor(private route:ActivatedRoute){}
ngOnInit(){
        this.route.queryParams.subscribe(params=>{
        let username=params['username'];
      });
 }

ในบางกรณีมันไม่ได้ให้อะไรใน NgOnInit ... อาจเป็นเพราะการเรียก init ก่อนที่จะเริ่มต้น params ในกรณีนี้คุณสามารถทำได้โดยขอให้สามารถสังเกตได้รอฟังก์ชั่น debounceTime (1000)

เช่น =>

 constructor(private route:ActivatedRoute){}
    ngOnInit(){
            this.route.queryParams.debounceTime(100).subscribe(params=>{
            let username=params['username'];
          });
     }

debounceTime () ปล่อยค่าจากแหล่งที่สังเกตได้เฉพาะหลังจากช่วงเวลาเฉพาะผ่านไปโดยไม่มีการปล่อยแหล่งที่มาอื่น

คุณไม่สามารถรับพารามิเตอร์จาก RouterState หากไม่ได้กำหนดไว้ในเส้นทางดังนั้นในตัวอย่างของคุณคุณต้องแยกวิเคราะห์ข้อความ ...

นี่คือรหัสที่ฉันใช้:

let re = /[?&]([^=#&]+)=([^&#]*)/g;
let match;
let isMatch = true;
let matches = [];
while (isMatch) {
    match = re.exec(window.location.href);
    if (match !== null) {
        matches[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
        if (match.index === re.lastIndex) {
            re.lastIndex++;
        }
    }
    else {
        isMatch = false;
    }
}
console.log(matches);

ข้อความค้นหาและเส้นทาง (เชิงมุม 8)

หากคุณมี URL เช่นhttps://myapp.com/owner/123/show?height=23 ให้ใช้

combineLatest( [this.route.paramMap, this.route.queryParamMap] )
  .subscribe( ([pathParams, queryParams]) => {
    let ownerId = pathParams.get('ownerId');    // =123
    let height  = queryParams.get('height');    // =height
    // ...
  })

UPDATE

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

this.router.navigateByUrl(yourUrl);