ルーティングの設定方法Angular4 router

Question

問題：自分のアプリケーションのルートを設定しています。私はhttps://localhost:4200/hero=idのような私のURLを持っていたいと思っています。ここでidはユーザーがHeroscomponentから選んだものになります。これは私のために働いていません。

私は以下のURLを試してみると、/ hero /：idという角度のドキュメントがあり、それは音素的に動作します。

https://localhost:4200/hero/:id

いくつかは、私にこの問題に対する解決策を提供していただけます。

これは以下

const appRoutes: Routes = [ 
    { path: 'hero', component: HeroesComponent }, 
    {path: 'hero{=:id}', component: HeroDetailComponent}, 
    { 
    path: 'home', 
    redirectTo: '/hero', 
    data: { title: 'Heroes List' } 
    },{ 
    path: 'student', 
    component: AppTable 
    },{ 
    path: 'video', 
    component: VideoTagComponent 
    },{ path: '', 
    redirectTo: '/hero', 
    pathMatch: 'full' 
    } 
    // { path: '**', component: PageNotFoundComponent } 
]; 

私のルートの設定ファイルでは、私はパス=「/英雄=」+ ID

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 
import {Hero} from './hero'; 


const HEROES: Hero[] = [ 
    { id: 11, name: 'Mr. Nice' }, 
    { id: 12, name: 'Narco' }, 
    { id: 13, name: 'Bombasto' }, 
    { id: 14, name: 'Celeritas' }, 
    { id: 15, name: 'Magneta' }, 
    { id: 16, name: 'RubberMan' }, 
    { id: 17, name: 'Dynama' }, 
    { id: 18, name: 'Dr IQ' }, 
    { id: 19, name: 'Magma' }, 
    { id: 20, name: 'Tornado' } 
]; 

@Component({ 
    selector: 'my-heroes', 
    templateUrl: './heroes.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class HeroesComponent { 
    hero = HEROES; 
    path:string; 
    selectedHero: Hero; 

    constructor(private router: Router){}   

    onSelect(hero: Hero): void { 
     this.selectedHero = hero; 
     this.path = "/hero=" +this.selectedHero.id.toString(); 
     this.router.navigate([this.path]); 
    } 

    // gotoDetail(): void { 
    // } 
} 

にルーティングしています私のHeroesComponentファイルですこれは、私はエラーですブラウザのコンソールに入る。代わりに{path: 'hero{=:id}', component: HeroDetailComponent},
使用{path: 'hero/:id', component: HeroDetailComponent},
または{path: 'hero/:id/detail', component: HeroDetailComponent},の
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'hero%3D13' Error: Cannot match any routes. URL Segment: 'hero%3D13'**strong text**

Answer 1

この問題の解決策を見つけました。

角度はこれをサポートしていないので...だから、我々はあなたがあなたのルーティングモジュールでは、あなたのAppComponent

import { CustomUrlSerializer } from 'file path'; 

@NgModule({ 
    bootstrap: [ AppComponent ], 
    imports: [ 
    ], 
    providers: [ 
    { provide: UrlSerializer, useClass: CustomUrlSerializer}, 

    ] 
}) 

をブートストラップされているこのモジュールはマッチャーを作成CustomUrlSerializer

import { UrlSerializer, UrlTree, DefaultUrlSerializer } from '@angular/router'; 

export class CustomUrlSerializer implements UrlSerializer { 
    public parse(url: any): UrlTree { 
     let _serializer = new DefaultUrlSerializer(); 
     return _serializer.parse(url.replace('=', '%3D')); 
    } 

    public serialize(tree: UrlTree): any {  
     let _serializer = new DefaultUrlSerializer(); 
     let path = _serializer.serialize(tree); 
     // use regex to replace as per the requirement. 
     return path.replace(/%3D/g, '='); 
    } 
} 

インポートを作成することができます経路をマッピングするためのものである。

export const ROUTES: Routes = [ 
    { matcher: pathMatcher, component: ComponetName}, 
    ]; 

const KEYWORD = /hero=([^?]*)/; 


export function pathMatcher(url: UrlSegment[], group: UrlSegmentGroup, route: Route): any { 
    if (url.length >= 1) { 
     const [part1] = url 
     if (part1.path.startsWith('hero')) { 
      const [,keyword] = KEYWORD.exec(part1.path) || ['','']; 
      let consumedUrl: UrlSegment[] = []; 
      consumedUrl.push(url[0]); 
      return { 
       consumed: consumedUrl, 
       posParams: { //The parameters if any you want to pass to ur component 
        heroId: new UrlSegment(keyword,{}) 
       } 
      } 
     } 
    } 
    return null 
} 

今、あなたのコンポーネントでは、

ルートはActivatedRoute

のインスタンスである

this.route.params.subscribe((params)=>{ 
      this.data = params['heroId']; 
     }) 

Answer 2

。 angular documentationによると

：あなたはそのようにパスを作成する必要があります。 { path: 'hero/:id', component: HeroDetailComponent },

そして、あなたのHeroDetailComponentであなたは、このようにIDをアクセスできるようになります：

constructor(
    private route: ActivatedRoute, 
    private router: Router, 
    private service: HeroService 
) {} 

ngOnInit() { 
    const hero = this.route.paramMap 
    .switchMap((params: ParamMap) => 
     this.service.getHero(params.get('id'))); 
} 

詳細official Documentation