Angular2 - 動的URLとルータを使用する方法

Question

私は次のテンプレート使用して、rootComponentの子である、このネストされたitemListComponentを、持っていると仮定します。

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

パスitem.url、から提供されますJSONサービスは、次のパス構造の一つを有することができ：

• /範疇/（コンテンツID）/（に接続されたタイトルをダッシュ​​（ - ））
• /カテゴリ2 /（コンテンツID）/（ダッシュ（ - ）で接続されたタイトル）
• /カテゴリー3 /（コンテンツID）/（ダッシュと接続タイトル（ - ））

例：これらのリンクはitemDetailコンポーネントを使用するように@RouteConfigを実現することができる方法

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

？

ご迷惑をおかけして申し訳ございません。私は完全なパス（組み立てられたパスではない）によってサービスによって提供される経路指定URLのための明確なハウツーガイドを見つけませんでした。

Answer 1

regexesを使用したEricのソリューションは、HashLocationStrategyを使用してうまく動作しますが、私が使用したソリューションは、articleとPlunkに基づいています。

私はその後、（APP_BASE_HREFを使用。official doc参照）PathLocationStrategyに変換し、我々は、サーバー側でデフォルトのフォールバック・ページとしてindex.htmlをを行う必要がありPathLocationStrategyの仕事を作るために

を。次に、gulp-webserverを使用した例を示します。

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

PathLocationStrategyでrouterLinkを使用する必要があります。そうしないと、ブラウザはURLにルーティングするときにページを更新し、1ページのアプリケーションのように完全に動作しません。

次に、* ngForループを使用して、異なるパスとIDを持つ異なるアイテムをレンダリングすることができました。

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

Answer 2

それは何のためですかregex matchesです。しかし、あらかじめ組み立てられたURLを持っている場合は、routerLinkを使用したくないかもしれません。 RouterLinkは配列を必要とするため、単純なURLを使用する必要があります。

は、あなたが今、この

#/category2/987654/hello-world 

のような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が正しく形成されていること、私たちは正規表現を使うことができます先に

@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を参照してください。

注意正規表現マッチャが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}