Angular2 - Как использовать маршрутизатор с динамическими URLs

Question

Предположим, у меня есть эта вложенная itemListComponent, который является дочерним по отношению к rootComponent, используя следующий шаблон:

<span *ngFor="#item of list"> 
    <a [routerLink]="[item.url]">{{item.title}}</a> | 
</span> 

Путь, item.url, которая осуществляется от Json обслуживание, может иметь одно из следующих действий структуры пути:

• /категория1/(идентификатор содержимого)/(заголовок, связанный с тиром (-))
• /категория2/(идентификатор содержимого)/(заголовок, связанный с тире (-))
• /category3/(а идентификатор контента)/(название связано с тире (-))

Примеры:

category2/987654/hello-world 
category2/123456/hi-teacher 
category3/554433/yo-brother 

Как могли @RouteConfig быть реализованы таким образом, чтобы эти ссылки использовать компонент itemDetail ?

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

Answer 1

Хотя решение Eric с использованием регулярных выражений отлично работает с использованием HashLocationStrategy, решение, которое я использовал, основано на этом article и Plunk от Yavo Fain.

я затем преобразуется в PathLocationStrategy (с использованием APP_BASE_HREF см. official doc)

Чтобы сделать PathLocationStrategy работу мы должны сделать index.html в качестве страницы резервного по умолчанию на стороне сервера. Вот пример использования Глоток-веб-сервер:

gulp.task('webserver', function() { 
    gulp.src('app') .pipe(webserver({ 
     fallback: 'index.html' 
    })); 
}); 

Мы должны использовать routerLink с PathLocationStrategy. В противном случае браузер обновит страницу при маршрутизации на URL-адреса и не будет полностью вести себя как одностраничное приложение.

Тогда я мог бы использовать цикл * ngFor для визуализации различных элементов с разными путями и идентификаторами.

<div *ngFor="#item of list"> 
    <a [routerLink]="['ContentId', {id:item.url}]">{{item.title}}</a> 
</div> 

Answer 2

Вот что такое regex matches. Но если у вас есть предварительно собранные URL-адреса, вы можете не использовать с ними routerLink. RouterLink ожидает массив, вам придется использовать простые URL-адреса.

Рассмотрим исходный фрагмент

<span *ngFor="#item of list"> 
    <a [href]="item.url">{{item.title}}</a> | 
</span> 

Предполагая, что вы используете HashLocationStrategy ваш URL должен содержать хэш-

<span *ngFor="#item of list"> 
    <a [href]="'#/' + item.url">{{item.title}}</a> | 
</span> 

Это должно привести к URL, как этот

#/category2/987654/hello-world 

сейчас что у нас правильно сформированы URL-адреса, мы можем использовать регулярные выражения, которые мы, мужчины Ранее

@RouteConfig([ 
    { 
    name : 'ItemDetail', 

    // regex that will match the URL in the href or the URL typed directly by the user 
    regex : '^([a-z0-9]+)/([0-9]+)/([a-z\\-]+)$', 

    // serializer is mandatory, but it is used when you have a routerLink with params 
    serializer : (params) => { 
     return new GeneratedUrl(`${params.a}/${params.b}/${params.c}`) 
    }, 
    component : ItemDetail 
    } 
]) 

Это самый простой, если у вас есть предварительно собранные URL-адреса.

См. Это plnkr с примером работы.

Обратите внимание, что регулярное выражение matchers были введены в beta.9 и они содержат несколько вопросов, см

• https://github.com/angular/angular/issues/7602
• https://github.com/angular/angular/issues/7554
• https://github.com/angular/angular/issues/7531

Вы можете нашли другие.

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

Answer 3

Попробуйте это:

<span *ngFor="#item of list"> 
    <a [routerLink]="['/category', item.url]"> 
     {{item.title}} 
    </a> 
</span> 

routes.ts:

{path: "category/:id", component: CategoryComponent}