Angular2ルータを使用してURLのようにGmailを作成するにはどうすればよいですか？

Question

私はAngular2を使ってルータで作業しています。私が作りたいURLは 'https://mail.google.com/mail/u/0/#search/angular/15y58930e5a82911'です。このURLは、メールボックスで「Angular」を検索し、検索結果から特定のメールを選択すると表示されます。しかし、私のアプリケーションはそれを達成できません。

私のアプリケーション構造はこのようなもので、私はAppModuleとSearchModuleを持っています。 各モジュールには独自のルータがあります。

app.routes.ts

export const routes: Routes = [ 
    { 
    path: '', 
    loadChildren: './home/index#HomeModule' 
    }, 
    { 
    path: 'search', 
    loadChildren: './search/index#SearchModule' 
    } 
]; 

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app', 
    template: ` 
    <app-header></app-header> 
    <router-outlet></router-outlet> 
` 
}) 
export class AppComponent { 

} 

search.routes.ts

export const SearchRoutes = [ 
    { 
    path: 'search', 
    component: SearchContainerComponent, 
    children: [ 
     { path: '', redirectTo: 'intro', pathMatch: 'full' }, 
     { path: 'intro', component: SearchIntroComponent }, 
     { path: 'artist/:id', component: DetailViewComponent } 
    ] 
    }, 
]; 

search.container.component

@Component({ 
    selector: 'app-search-container', 
    template: ` 
    <div class="container"> 
    <div class="col-md-5"> 
     <app-search (search)="searchArtist($event);"> </app-search> 
     <artist-list 
     [artistList]="artistsList" 
     (artist)="displaySelectedArtist($event)" 
     ></artist-list> 
    </div> 
    <div class="col-md-7"> 
     <router-outlet></router-outlet> 
    </div> 
    </div> 
    ` 
}) 

export class SearchContainerComponent implements OnInit { 


} 

これらのコードでは、左側のパネルに、検索の結果としてアーティストのリストが表示されるはずです。右のパネルで、最初のアーティストの詳細情報が自動的に表示されるはずです。対応するURLはhttp://xxx.xxx.com/#/artist/11になります。 11は、コーヒーを使ってアーティストを検索した最初のアーティストです。しかし、私が望むURLはhttp://xxx.xxx.com/#/artist/11の代わりにhttp://xxx.xxx.com/#/search/coffee/artist/11 'です。

あなたの誰かがこれについていくつかアドバイスしていただけますか？

Answer 1

あなたのルート設定：

export const SearchRoutes = [ 
    { 
    path: 'search', 
    component: SearchContainerComponent, 
    children: [ 
     { path: '', redirectTo: 'intro', pathMatch: 'full' }, 
     { path: 'intro', component: SearchIntroComponent }, 
     { path: 'artist/:id', component: DetailViewComponent } 
    ] 
    }, 
]; 

は、あなたのルートがどのように見えるかを定義します。

export const SearchRoutes = [ 
    { 
    path: '', 
    component: SearchContainerComponent, 
    children: [ 
     { path: '', redirectTo: 'intro', pathMatch: 'full' }, 
     { path: 'intro', component: SearchIntroComponent }, 
     { path: 'artist/:id', component: DetailViewComponent } 
    ] 
    }, 
]; 

OR、それはもはや、検索ルートの子であるので、あなたのアーティストのルートを移動しない：あなたは、URLに「検索」したくない場合は、このようにそのパスを削除することができます。

Answer 2

これは私のプロジェクトでこれと同様に実装されています。あなたがそれを好きだと思います。私はアドレスバーを自動的に更新する検索このページでhttps://angular.io/apiからこのアイデアを得た。あなたは、このコンポーネントで実行する必要があり

先に行くと

import { NavigationExtras, ActivatedRoute, Router } from '@angular/router' 
import { FormBuilder, FormGroup } from '@angular/forms'; 

@Component({ 
    selector: 'app-employees', 
    template: ` 
    <form [formGroup]="search"> 
     <input type="text" placeholder="Search" formControlName="Empname" /> 
     <input type="text" placeholder="Search" formControlName="destination" /> 
    </form> 
    ` 
}) 

export class EmployeesComponent implements OnInit { 
    search: FormGroup; 

    constructor(
    private route: ActivatedRoute, 
    private router: Router, 
    private fb: FormBuilder 
) { } 

    ngOnInit() { 
    createForm(); 

    this.route.queryParamMap.subscribe(params => { 

     this.search.setValue({ 
      Empname: params.get('name') || '', 
      destination: params.get('destination') || '' 
     }); 

    }); 

    this.search.valueChanges.subscribe(() => { 
     this.onSearchValueChange(); 
    }); 

    } 


    onSearchValueChange() { 

     let obj = new Object(); 
     const name = this.search.get('Empname').value; 
     const des = this.search.get('destination').value; 

     !!name && (obj['name'] = name); 
     !!des && (obj['destination'] = des); 

     const navigationExtras: NavigationExtras = { 
      relativeTo: this.route, 
      queryParams: obj, 
      replaceUrl: true 
     }; 

     this.router.navigate(['../employees'], navigationExtras); 
    } 


    createForm() { 
    this.search = this.fb.group({ 
     Empname: '', 
     destination: '' 
    }); 
    } 
} 

この

コンポーネントファイルを試すだけの事はその更新は、あなたの入力モデル名に応じて、入力の名前です。私はここでフォームビルダを使用しています。

はNavigationExtras https://angular.io/api/router/NavigationExtras