2017-01-05 6 views
1

경로 매개 변수를 경로의 첫 번째 요소로 가질 가능성이 있습니까? 예를 들어 ,의 우리가 날씨와 포털이 도시는 우리의 '맥락'이라고하자 (이 '상황'없이 어떤 페이지에 액세스 할 가능성은 없음), 그래서 우리는 같은 페이지가 원하는 방법 :매개 변수를 경로의 첫 번째 요소로 라우팅

/:city/dashboard 
/:city/airhealth 

을 이러한 경로를 경로에 추가 하시겠습니까? 나는 이런 식으로 뭔가를 할 가능성이 알고

/dashboard/:city 
/airhealth/:city 

하지만 모든 페이지가 도시의 컨텍스트가해야 할 때 첫 번째 예는이 경우에 더 적합합니다.

답변

0

이렇게하는 데 문제가 없을 것이라고 생각합니다. 라우팅 파일과 경로 링크를 수정하면됩니다. 여기

코드

app.routing.ts

import { Routes, RouterModule } from '@angular/router'; 
import ComponentOne from './component-one'; 
import ComponentTwo from './component-two'; 

export const routes: Routes = [ 
    { path: '', redirectTo: 'component-one', pathMatch: 'full' }, 
    { path: 'component-one', component: ComponentOne }, 
    { path: ':id/dashboard', component: ComponentTwo } 
]; 

export const appRoutingProviders: any[] = [ 

]; 

export const routing = RouterModule.forRoot(routes); 

app.component.ts

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

@Component({ 
    selector: 'app', 
    template: ` 
    <nav> 
     <a [routerLink]="['/component-one']">Component One</a> 
     <a [routerLink]="[123,'dashboard']">Component Two (id: 123)</a> <-- replace 123 with city name 
    </nav> 
    <div style="color: green; margin-top: 1rem;">Outlet:</div> 
    <div style="border: 2px solid green; padding: 1rem;"> 
     <router-outlet></router-outlet> 
    </div> 
    ` 
}) 
export class AppComponent { 

} 

성분 two.ts이다

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

@Component({ 
    selector: 'component-two', 
    template: 'Component Two with route param <b><code>ID: {{ id }}</code></b>' 
}) 
export default class ComponentTwo { 

    private id; 

    constructor(private route: ActivatedRoute) {} 

    private ngOnInit() { 
    this.sub = this.route.params.subscribe(params => { 
     this.id = +params['id']; // use (+) converts string 'id' to a number other wise use params['id'] directly 
    }); 
    } 

    private ngOnDestroy() { 
    this.sub.unsubscribe(); 
    } 

} 

여기에 근무중인 plnkr은 https://plnkr.co/edit/Purfk2msPE1XcZgjowvd?p=preview

입니다.
관련 문제