В моем routable component
у меня
@RouteConfig {
{path: '/login', name: 'Login', component: LoginComponent}
}
Но как мне получить параметры запроса, если я перейду к app_url/login?token=1234
?
В моем routable component
у меня
@RouteConfig {
{path: '/login', name: 'Login', component: LoginComponent}
}
Но как мне получить параметры запроса, если я перейду к app_url/login?token=1234
?
В дополнение к двум предыдущим ответам Angular2 поддерживает как параметры запроса, так и переменные пути в маршрутизации. В определении @RouteConfig
, если вы определяете параметры в пути, Angular2 обрабатывает их как переменные пути и как параметры запроса, если нет.
Возьмем образец:
@RouteConfig([
{ path: '/:id', component: DetailsComponent, name: 'Details'}
])
Если вы вызываете метод navigate
маршрутизатора следующим образом:
this.router.navigate( [
'Details', { id: 'companyId', param1: 'value1'
}]);
У вас будет следующий адрес: /companyId?param1=value1
. Способ получения параметров одинаковый как для параметров запроса, так и для переменных пути. Разница между ними заключается в том, что переменные пути можно рассматривать как обязательные параметры и параметры запроса как необязательные.
Надеюсь, это поможет вам, Thierry
ОБНОВЛЕНИЕ: После изменения параметров маршрутизатора alpha.31 параметры http-запроса больше не работают (Матричные параметры # 2774), Вместо этого маршрутизатор angular использует так называемую нотацию Matrix URL.
Ссылка https://angular.io/docs/ts/latest/guide/router.html#!#optional-route-parameters:
Необязательные параметры маршрута не разделяются символом "?" и "&" как они будет в строке запроса URL. Они разделены точкой с запятой ";" Это текстовое обозначение URL-адреса - то, что вы, возможно, раньше не видели.
Теперь RouteParams устарели, поэтому вот как это сделать на новом маршрутизаторе.
this.router.navigate(['/login'],{ queryParams: { token:'1234'}})
А затем в компоненте входа в систему вы можете взять параметр,
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// Capture the token if available
this.sessionId = this.route.queryParams['token']
}
Здесь документация
Кажется, что RouteParams
больше не существует, и его заменяют на ActivatedRoute
. ActivatedRoute
дает нам доступ к матричной записи параметров URL. Если мы хотим получить параметры строки запроса ?
, нам нужно использовать Router.RouterState
. традиционные параметры строки запроса сохраняются во время маршрутизации, что может быть нежелательным результатом. Сохранение фрагмента теперь необязательно в маршрутизаторе 3.0.0-rc.1.
import { Router, ActivatedRoute } from '@angular/router';
@Component ({...})
export class paramaterDemo {
private queryParamaterValue: string;
private matrixParamaterValue: string;
private querySub: any;
private matrixSub: any;
constructor(private router: Router, private route: ActivatedRoute) { }
ngOnInit() {
this.router.routerState.snapshot.queryParams["queryParamaterName"];
this.querySub = this.router.routerState.queryParams.subscribe(queryParams =>
this.queryParamaterValue = queryParams["queryParameterName"];
);
this.route.snapshot.params["matrixParameterName"];
this.route.params.subscribe(matrixParams =>
this.matrixParamterValue = matrixParams["matrixParameterName"];
);
}
ngOnDestroy() {
if (this.querySub) {
this.querySub.unsubscribe();
}
if (this.matrixSub) {
this.matrixSub.unsubscribe();
}
}
}
Мы должны иметь возможность манипулировать нотацией ?
при навигации, а также нотацией ;
, но я только получил матричную нотацию для работы. plnker, прикрепленный к последней документации маршрутизатора, показывает, что он должен выглядеть следующим образом.
let sessionId = 123456789;
let navigationExtras = {
queryParams: { 'session_id': sessionId },
fragment: 'anchor'
};
// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);
Это работало для меня (от Angular 2.1.0):
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// Capture the token if available
this.sessionId = this.route.snapshot.queryParams['token']
}
(Только для детского маршрута, такого как /hello -world)
В случае, если вы хотите сделать такой вызов:
/привет-мир Foo = бар &? Фрукты = банан
Angular2 не использует ? и &, но ;. Поэтому правильный URL должен быть:
/привет-мир, Foo = бар, фрукты = банан
И получить эти данные:
import { Router, ActivatedRoute, Params } from '@angular/router';
private foo: string;
private fruit: string;
constructor(
private route: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
this.route.params.forEach((params: Params) => {
this.foo = params['foo'];
this.fruit = params['fruit'];
});
console.log(this.foo, this.fruit); // you should get your parameters here
}
Источник: https://angular.io/docs/ts/latest/guide/router.html
Angular2 v2.1.0 (стабильный):
Активированный Route обеспечивает наблюдаемый, который можно подписаться.
constructor(
private route: ActivatedRoute
) { }
this.route.params.subscribe(params => {
let value = params[key];
});
Это срабатывает каждый раз, когда маршрут также обновляется:/home/files/123 → /home/files/321
Я включил JS (для OG) и TS версии ниже.
.html
<a [routerLink]="['/search', { tag: 'fish' } ]">A link</a>
В приведенном выше примере я использую массив параметров ссылки для получения дополнительной информации.
routing.js
(function(app) {
app.routing = ng.router.RouterModule.forRoot([
{ path: '', component: indexComponent },
{ path: 'search', component: searchComponent }
]);
})(window.app || (window.app = {}));
searchComponent.js
(function(app) {
app.searchComponent =
ng.core.Component({
selector: 'search',
templateUrl: 'view/search.html'
})
.Class({
constructor: [ ng.router.Router, ng.router.ActivatedRoute, function(router, activatedRoute) {
// Pull out the params with activatedRoute...
console.log(' params', activatedRoute.snapshot.params);
// Object {tag: "fish"}
}]
}
});
})(window.app || (window.app = {}));
routing.ts(выдержка)
const appRoutes: Routes = [
{ path: '', component: IndexComponent },
{ path: 'search', component: SearchComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
// other imports here
],
...
})
export class AppModule { }
searchComponent.ts
import 'rxjs/add/operator/switchMap';
import { OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
export class SearchComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
this.route.params
.switchMap((params: Params) => doSomething(params['tag']))
}
Дополнительная информация:
"Массив параметров ссылки" https://angular.io/docs/ts/latest/guide/router.html#!#link-parameters-array
"Активированный маршрут - универсальный магазин для информации маршрута" https://angular.io/docs/ts/latest/guide/router.html#!#activated-route
Для Angular 4
Адрес:
http://example.com/company/100
Путь маршрутизатора:
const routes: Routes = [
{ path: 'company/:companyId', component: CompanyDetailsComponent},
]
компонент:
@Component({
selector: 'company-details',
templateUrl: './company.details.component.html',
styleUrls: ['./company.component.css']
})
export class CompanyDetailsComponent{
companyId: string;
constructor(private router: Router, private route: ActivatedRoute) {
this.route.params.subscribe(params => {
this.companyId = params.companyId;
console.log('companyId :'+this.companyId);
});
}
}
Консольный выход:
companyId: 100
В соответствии с Angular2 документацией вы должны использовать:
@RouteConfig([
{path: '/login/:token', name: 'Login', component: LoginComponent},
])
@Component({ template: 'login: {{token}}' })
class LoginComponent{
token: string;
constructor(params: RouteParams) {
this.token = params.get('token');
}
}
Route.snapshot предоставляет начальное значение параметра route карта. Вы можете получить доступ к параметрам напрямую без подписки или добавление наблюдаемых операторов. Намного проще написать и прочитать:
Цитата из angular документов
Чтобы разобраться с этим, вот как это сделать с новым маршрутизатором:
this.router.navigate(['/login'], { queryParams: { token:'1234'} });
А затем в компоненте входа в систему (обратите внимание на добавленный новый .snapshot
):
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.sessionId = this.route.snapshot.queryParams['token']
}
В Angular 6 я нашел этот более простой способ:
navigate(["/yourpage", { "someParamName": "paramValue"}]);
Затем в конструкторе или в ngInit
вы можете напрямую использовать:
let value = this.route.snapshot.params.someParamName;
Простой способ сделать это в Angular 7+ заключается в следующем:
Определите путь в вашем? -routing.module.ts
{ path: '/yourpage', component: component-name }
Импортируйте модуль ActivateRoute и Router в свой компонент и вставьте их в конструктор
contructor(private route: ActivateRoute, private router: Router){ ... }
Подписаться ActivateRoute на ngOnInit
ngOnInit() {
this.route.queryParams.subscribe(params => {
console.log(params);
// {page: '2' }
})
}
Предоставьте ссылку:
<a [routerLink]="['/yourpage']" [queryParams]="{ page: 2 }">2</a>