angular2.0.0-beta.7을 사용합니다. 구성 요소가 경로에로드되면 구성 요소가로 경로 /path?query=value1재 지정됩니다 /path. GET 매개 변수가 제거 된 이유는 무엇입니까? 매개 변수를 어떻게 보존 할 수 있습니까?
라우터에 오류가 있습니다. 내가 같은 주요 경로가 있다면
@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¶m2=value2")답변
ActivatedRoute하나 의 인스턴스를 주입하면 a queryParams및 observable을 포함한 다양한 observable을 구독 할 수 있습니다 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()메소드가 필요하지 않다는 것을 올바르게 지적했습니다 . 이것은 내 코드 샘플에서 제거되었습니다. ( 이 자습서의 파란색 경고 상자 참조 )
답변
이 http://stackoverflow.com?param1=value 같은 URL
다음 코드로 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'];
});이 예에서는 URL과 같은 검색어 매개 변수 ID 를 읽습니다 example.com?id=41.
여전히 주목할 사항이 거의 없습니다.
paramslike의 속성에 액세스 하면params['id']항상 문자열 이 반환 되며 앞에 접두사를 붙여 숫자 로 변환 할 수 있습니다+.- 쿼리 매개 변수를 observable과 함께 가져 오는 이유는 새로운 구성 요소를로드하는 대신 동일한 구성 요소 인스턴스를 재사용 할 수 있기 때문입니다. 쿼리 매개 변수가 변경 될 때마다 구독 한 새 이벤트가 발생하므로 이에 따라 변경 사항에 대응할 수 있습니다.
답변
@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
}답변
쿼리 매개 변수를 보내려면
import { Router } from '@angular/router';
this.router.navigate([ '/your-route' ], { queryParams: { key: va1, keyN: valN } });쿼리 매개 변수를 받으려면
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");
}구성 요소를로드 할 때 구성 요소가 제거되는 이유는 기본 동작이 아닙니다. 깨끗한 테스트 프로젝트에서 구체적으로 확인했지만 리디렉션되거나 변경되지 않았습니다. 기본 경로입니까 아니면 라우팅에 특별한 것이 있습니까?
https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters 의 Angular2 Tutorial에서 쿼리 문자열 및 매개 변수를 사용한 라우팅에 대해 읽으십시오.
