Angular 2 - permalinkを追加するには？

Question

私の角2のアプリにパーマリンクを追加しようとしましたが、まだ方法が見つかりませんでした。

マイアプリ-routing.module.ts：

const routes: Routes = [ 
    { path: '', pathMatch: 'full', component: TagelerComponent }, 
    { path: 'tageler', component: TagelerListComponent }, 
    { path: 'tageler-details/:id', component: TagelerDetailsComponent }, 
    { path: 'group/:id', component: GroupDetailsComponent }, 
    { path: 'tageler/admin', component: AdminComponent }, 
]; 

@NgModule({ 
    imports: [ RouterModule.forRoot(routes) ], 
    exports: [ RouterModule ] 
}) 
export class AppRoutingModule {} 

そして、私のコードは次のようになります。http://localhost:4200/group/5910c2282249261cc61d0a7e

の代わりに：この例では

<div *ngFor="let group of groups | groupTypeFilter: 'Trupp' "> 
    <a routerLink="/group/{{group._id}}"> 
     <li class="list-group-item"> 
     {{group.name}} 
     </li> 
    </a> 
</div> 

URLのようなものですグループID、ルーティングを変更せずにグループの名前（例：犬）を表示したいので、URLは 'http://localhost:4200/group/dogs'に変更されます。

私はAngular 2を初めて使うので、実際にこれが可能かどうかはわかりません。

誰かが私を助けることができたら嬉しいです！

Answer 1

答えは、ユーザーが新しいタブを開いて、URLを入力すると仮定し、idでグループを照会し、その後routerLinkで名前とIDを交換し、ないできある

http://localhost:4200/group/dogs

アプリがロードされ、唯一の参照はdogsです。IDはどこから来ますか？指定したグループ名のIDを返す辞書を定義していない場合や、黒い魔法を使用している場合は

ですが、ユーザーが親を介して詳細ページにアクセスできるようにする場合は、インスタンスを共有サービスを使用して、ルータのリンクをgroup.nameに設定します。

でSharedService

export class SharedService{ 

    currGroupId: number; 

    constructor() { } 

    setGroupLink(group) { 
     // you can pass the object as a whole but I'll use `group.id` in this example 
     // this.currGroup = group; 
     this.currGroupId = group.id; 
     return '/group/' + group.name; 
    } 
} 

で

<div *ngFor="let group of groups | groupTypeFilter: 'Trupp' "> 
    <a [routerLink]="shared.setGroupLink(group)"> 
    <li class="list-group-item"> 
     {{group.name}} 
    </li> 
    </a> 
</div> 

constructor(public shared: SharedService) { } 

GroupDetailsComponent

groupId: number; 

constructor(public shared: SharedService) { } 

ngOnInit() { 
    this.groupId = this.shared.currGroupId; 
} 

注：groupIdが定義されていないため、ユーザーがhttp://localhost:4200/group/dogsを入力した場合このアプローチは動作しません。道による

、アンダースコア_であなたの変数の名前を接頭辞避けるため、Angular Style Guide