Глубокие пути с элементом app-route

Question

Я использую компонент маршрута приложения для маршрутизации.

Вот важная часть кода:

<app-location route="{{route}}"></app-location> 
<app-route 
     route="{{route}}" 
     pattern="/:page" 
     data="{{routeData}}" 
     tail="{{subroute}}"></app-route> 

Я хотел бы улучшить ясность моей структуры приложения, так что настройки не будет находиться в корневой папке, а в папке пользователя и т.д. URL копирует структуру моих папок. В идеале модель приложение-маршрут будет похожа на это:

шаблона = «/ {путь_к_папки} /: страница»

Тогда я хотел бы использовать obserever, что бы слушать изменения routeData, которые будут получать путь_к_папку и страницу как параметры. После того, что я ленивый загрузить страницу надлежащим образом:

var resolvedPageUrl = this.resolveUrl("/views/" + folderpath + page + '-view.html'); 
this.importHref(resolvedPageUrl, null, this._showPage404, true); 

Я знаю, что это было бы легко осуществить путем удаления элемента приложения маршрутный и разбора маршрута самого, но мне интересно, если есть «Offical» способ получить это поведение с помощью компонента app-route.

Заранее спасибо, Ян

Answer 1

Основная идея заключается в том, что вы приковать маршруты вместе. Таким образом, чтобы достичь того, чего вы хотите, вы эффективно, вероятно, будет делать что-то вроде этого

<app-location route="{{route}}"></app-location> 
<app-route 
    route="{{route}}" 
    pattern="/:folderpath" 
    data="{{routeData}}" 
    tail="{{subRoute}}"></app-route> 

--------- Еще один элемент, возможно

<app-route 
    route="{{subRoute}}" 
    pattern="/:page" 
    data="{{subRouteData}}"></app-route> 

Берегись, есть немного Гоча с этим , в том, что «страница» app-route будет соответствовать независимо от того, какой путь к папке фактически существует, и если вы распространяете это в других элементах, вы можете не захотеть, чтобы это произошло.

Решение этой проблемы заключается в расширении картины в случаях подмаршрут - как так

<app-route 
    route="{{subRoute}}" 
    pattern="/reports/:page" 
    data="{{subRouteData}}"></app-route> 

и

<app-route 
    route="{{subRoute}}" 
    pattern="/appointments/:page" 
    data="{{subRouteData}}"></app-route>