Использование регулярного выражения для значения пути для маршрутов в угловом2

Question

Я хочу настроить маршрут для моего приложения 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 и /зеркало являются постоянными. Но средняя часть может быть что угодно, как /floor1 или /floor2/что-то/что-то/....

Как я могу определить маршрут, который в маршрутизации модуля.

const routes: Routes = [ 
    { 
     path: 'myhouse', 
     children: [ 
      { 
       path: ..., //here how do i configure it 
       children: [ 
        { 
         path: '/mirror', 
         component: MirrorComponent    
        } 
       ] 
      } 
     ] 
    } 
]; 

Здесь компонент зеркала должен быть загружен, если URL-адрес имеет /зеркало в конце URL-адрес, если не войти в компонент должен быть загружен. Зеркало будет загружено для показанных выше ссылок. Каждый компонент зеркала будет иметь другое значение свойства в соответствии с переменной частью URL.

Для компонента URL входа будет как:

http://localhost/myhouse

или

http://localhost/myhouse/floor1

или

http://localhost/myhouse/floor1/bathroom1

Я попытался хотел использовать регулярное выражение, но это, кажется, регулярное выражение не поддерживается для новой версии angular2. Если я ошибаюсь в том, что вы не можете использовать регулярное выражение, пожалуйста, любезно укажите мне в этом направлении пример. Если нет, пожалуйста, укажите мне правильное направление.

Answer 1

Попробуйте сделать это:

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

Answer 2

Вы можете использовать UrlMatcher, предоставляя matcher ключ для Route.К сожалению, это undocumented for now, так что вам может понадобиться check the source of 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 любезно provided пример gist ComplexUrlMatcher. Он должен дать вам представление о том, как реализовать тот, который вам подходит (к сожалению, лицензии нет, поэтому вы не можете использовать его как есть).

Answer 3

Late ответить, но если вы все-таки есть один и тот же вопрос здесь, как я решил такую ​​же проблему ..

Это мой маршрут

{ 
    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://localhost/myhouse/floor1/room1/bathroom/mirror

это даст мне

/Myhouse/floor1/Room1/ванной/зеркало

Вы можете легко манипулировать этот адрес для вашего использования.