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 {} 

그리고 내 코드는 다음과 같습니다

이 예에서

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

URL이 뭔가 같은 : http://localhost:4200/group/5910c2282249261cc61d0a7e

대신 그룹 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으로 설정합니다.

<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) { } 

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; 
    } 
} 

GroupDetailsComponent 에서 SharedService 에

groupId: number; 

constructor(public shared: SharedService) { } 

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

는 참고 : groupId이 정의되어 있기 때문에 사용자가 http://localhost:4200/group/dogs를 입력 한 경우이 방법이 작동하지 않습니다 그런데

, 나는 그것을 시도 할 것이다, Angular Style Guide