Использование регулярного выражения для значения пути в angular2
Я хочу настроить маршрут для моего приложения angular2. Мой URL должен быть таким:
http://domain_name/constant_value/variable_value/constant_value
URL может быть похож на следующие примеры:
http://localhost/myhouse/floor1/mirror
http://localhost/myhouse/floor1/room1/mirror
http://localhost/myhouse/floor1/room1/bathroom/mirror
Здесь маршруты / myhouse и / mirror постоянны. Но средняя часть может быть что-нибудь вроде / floor1 или / floor2 / что-то / что-то /....
Как я могу определить маршрут для этого в модуле маршрутизации.
const routes: Routes = [
{
path: 'myhouse',
children: [
{
path: ..., //here how do i configure it
children: [
{
path: '/mirror',
component: MirrorComponent
}
]
}
]
}
];
Здесь зеркальный компонент должен быть загружен, если URL имеет / mirror в конце URL, если не загружен компонент входа в систему. Зеркало будет загружено для URL, показанных выше. Каждый зеркальный компонент будет иметь различное значение свойства внутри в соответствии с переменной частью URL.
Для входа в систему компонент будет выглядеть так:
или же
или же
Я пытался использовать регулярное выражение, но кажется, что регулярное выражение не поддерживается для более новой версии angular2. Если я ошибаюсь из-за того, что не могу использовать регулярные выражения, пожалуйста, укажите мне на это направление на примере. Если нет, пожалуйста, укажите мне правильное направление.
4 ответа
Вы могли бы использовать UrlMatcher предоставляя matcher ключ для Route, К сожалению, на данный момент это недокументировано, поэтому вам может потребоваться проверить исходный код router / src / config.ts:
/**
* @whatItDoes Represents the results of the URL matching.
*
* * `consumed` is an array of the consumed URL segments.
* * `posParams` is a map of positional parameters.
*
* @experimental
*/
export type UrlMatchResult = {
consumed: UrlSegment[]; posParams?: {[name: string]: UrlSegment};
};
/**
* @whatItDoes A function matching URLs
*
* @description
*
* A custom URL matcher can be provided when a combination of `path` and `pathMatch` isn't
* expressive enough.
*
* For instance, the following matcher matches html files.
*
* ```
* function htmlFiles(url: UrlSegment[]) {
* return url.length === 1 && url[0].path.endsWith('.html') ? ({consumed: url}) : null;
* }
*
* const routes = [{ matcher: htmlFiles, component: HtmlCmp }];
* ```
*
* @experimental
*/
export type UrlMatcher = (segments: UrlSegment[], group: UrlSegmentGroup, route: Route) =>
UrlMatchResult;
Это в основном позволяет вам написать функцию, которая может выполнять любые виды сопоставления, включая регулярные выражения.
Он все еще экспериментальный, так что примеров не так много, но github/matanshukry любезно предоставил пример ComplexUrlMatcher, Это должно дать вам представление о том, как реализовать тот, который соответствует вашим потребностям (к сожалению, нет лицензии, поэтому вы не можете использовать ее как есть).
Попробуйте сделать это:
const routes: Routes = [
{
path: 'myhouse',
children: [
{
path: ':name', //FOR VARIABLE VALUE
children: [
{
path: 'mirror', //REMOVE SLASH
component: MirrorComponent
}
]
}
]
}
];
Здесь вы найдете лучшее объяснение: http://vsavkin.tumblr.com/post/146722301646/angular-router-empty-paths-componentless-routes
Поздно, но если у вас все еще есть та же проблема, вот как я решил ту же проблему..
Это мой маршрут
{
path: 'myhouse',
component: MyParenthouseComponent,
children : [{
path: '**',
component: MyhouseComponent
}]
}
Я определил myhouse как родительский маршрут и определил ** детский маршрут к нему. Родительский компонент MyParenthouseComponent держит <router-outlet></router-outlet> как шаблон, больше ничего.(Если вам нужно что-то еще, это ваше дело)
В моем MyhouseComponentngOnInit Я просто делаю это
_router.events.subscribe((val) => {
console.log(val);
if(val instanceof NavigationEnd) {
var url = this._router.url;
//do anything with url
}
});
импортированные маршруты, как это
import { Router, ActivatedRoute, ParamMap, NavigationStart, NavigationEnd } from '@angular/router';
Это даст мне текущий маршрут
Например, в случае этого маршрута
HTTP: // локальный / Myhouse / floor1 / room1 / ванной / зеркало
это даст мне
/ Myhouse / floor1 / room1 / ванной / зеркало
Вы можете легко манипулировать этим URL для вашего использования.
Я знаю, что вы ищете значения пути регулярного выражения, но может быть другой случай, когда на основе заданного префикса, за которым следует неизвестный URL-адрес, вы хотите выполнить перенаправление.
Вот пример:
const routes: Routes = [
{
path: 'vacancies',
component: VacanciesContainer,
children: [
{
path: '',
component: VacanciesComponent
},
{
path: 'create',
component: VacancyCreateComponent
}
]
},
{
path: 'users',
component: UsersContainer,
children: [
{
path: '',
component: UsersComponent
},
{
path: 'create',
component: UserCreateComponent
},
{
path: '**',
redirectTo: '',
pathMatch: 'full'
}
]
},
{
path: '**', redirectTo: 'vacancies', pathMatch: 'full'
}];
Что это решает?
для URL: /users/something-wrong будет перенаправлен на /users.
для URL: /something-wrong/something-else будет перенаправлен на /vacancies
Вот как вы можете решить это.
import { Routes, UrlSegment } from '@angular/router';
const myHouseRouteMatcher =
(url: UrlSegment[]) => ({ consumed: url.slice(0, -1) });
const routes: Routes = [
{
path: 'myhouse',
children: [
{
matcher: myHouseRouteMatcher,
children: [
{
path: 'mirror',
component: MirrorComponent
},
{
path: 'bathtub',
component: BathtubComponent
}
]
}
]
}
];