각도 2 옵션 경로 매개 변수

Angular 2 라우트에 선택적 라우트 매개 변수를 사용할 수 있습니까? RouteConfig에서 Angular 1.x 구문을 시도했지만 아래 오류가 발생했습니다.

"원본 예외 : 경로"/ user / : id? "에 경로 구성에서 허용되지 않는"? "가 포함되어 있습니다."

@RouteConfig([
{
    path: '/user/:id?',
    component: User,
    as: 'User'
}])

매개 변수를 사용하거나 사용하지 않고 여러 경로를 정의 할 수 있습니다.

@RouteConfig([
    { path: '/user/:id', component: User, name: 'User' },
    { path: '/user', component: User, name: 'Usernew' }
])

구성 요소에서 선택적 매개 변수를 처리하십시오.

constructor(params: RouteParams) {
    var paramId = params.get("id");

    if (paramId) {
        ...
    }
}

관련 github 문제를 참조하십시오 : https://github.com/angular/angular/issues/3525

{path: 'users', redirectTo: 'users/', pathMatch: 'full'},
{path: 'users/:userId', component: UserComponent}

이렇게하면 매개 변수가 추가 될 때 구성 요소가 다시 렌더링되지 않습니다.

정보가 선택적인 경우 쿼리 매개 변수를 사용하는 것이 좋습니다.

경로 매개 변수 또는 쿼리 매개 변수?

강력하고 빠른 규칙은 없습니다. 일반적으로

라우트 매개 변수를 선호

• 값이 필요합니다.
• 값은 한 경로 경로를 다른 경로 경로와 구별하기 위해 필요합니다.

때 쿼리 매개 변수를 선호

• 값은 선택 사항입니다.
• 값은 복잡하거나 다변량입니다.

에서 https://angular.io/guide/router#optional-route-parameters

경로 경로에서 매개 변수를 꺼내기 만하면됩니다.

@RouteConfig([
{
    path: '/user/',
    component: User,
    as: 'User'
}])

각도 4-선택적 매개 변수의 순서를 해결하는 솔루션 :

이 작업을 수행:

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'products', component: ProductsComponent},
  {path: 'products/:id', component: ProductsComponent}
]

주의 products와 products/:id경로가 정확히 이름이 동일합니다. 각도 4는 products매개 변수가없는 경로에 대해 올바르게 따르며 매개 변수가 있으면 경로를 따릅니다 products/:id.

그러나, 비 매개 변수 경로에 대한 경로가 products있어야 하지 , 후행 슬래시를 다른 각도 잘못 매개 변수 경로로 취급됩니다. 그래서 내 경우에는 제품에 대한 슬래시가 있었고 작동하지 않았습니다.

이 작업을 수행하지 마십시오 :

...
{path: 'products/', component: ProductsComponent},
{path: 'products/:id', component: ProductsComponent},
...

rerezz의 대답은 꽤 좋지만 심각한 결함이 있습니다. 그것은 원인이 User재 실행에 구성 요소 ngOnInit방법을.

매개 변수가없는 경로에서 매개 변수 경로로 전환 할 때 무거운 작업을 수행하고 다시 실행하지 않으려는 경우 문제가 될 수 있습니다. 이 두 경로는 선택적인 url 매개 변수를 모방하기위한 것이지만 2 개의 개별 경로가되지는 않습니다.

문제를 해결하기 위해 제안하는 내용은 다음과 같습니다.

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: ':id', component: UserWithParam, name: 'Usernew' }
    ]
  }
];

그런 다음 매개 변수 처리를 담당하는 논리를 UserWithParam구성 요소로 이동하고 기본 논리를 User구성 요소 에 그대로 둡니다 . / user 에서 / user / 123으로User::ngOnInit 이동 하면 무엇을하든 다시 실행되지 않습니다 .

를 붙이 잊지 마세요 <router-outlet></router-outlet>에서 User의 템플릿입니다.

여러 경로 항목을 추가하는 것이 좋습니다 rerezz의 답변 을 포함하여 여기에 제안 된 답변 .

그러나 경로 항목간에, 즉 매개 변수가있는 경로 항목과 매개 변수가없는 항목 사이를 변경할 때 구성 요소가 다시 작성됩니다.

이를 피하려면 두 경로와 일치하는 자체 경로 매처를 만들 수 있습니다.

export function userPageMatcher(segments: UrlSegment[]): UrlMatchResult {
    if (segments.length > 0 && segments[0].path === 'user') {
        if (segments.length === 1) {
            return {
                consumed: segments,
                posParams: {},
            };
        }
        if (segments.length === 2) {
            return {
                consumed: segments,
                posParams: { id: segments[1] },
            };
        }
        return <UrlMatchResult>(null as any);
    }
    return <UrlMatchResult>(null as any);
 }

그런 다음 경로 구성에서 매처를 사용하십시오.

const routes: Routes = [
    {
        matcher: userPageMatcher,
        component: User,
    }
];

angular4를 사용하면 계층 구조로 함께 경로를 구성하면됩니다.

const appRoutes: Routes = [
  { 
    path: '', 
    component: MainPageComponent 
  },
  { 
    path: 'car/details', 
    component: CarDetailsComponent 
  },
  { 
    path: 'car/details/platforms-products', 
    component: CarProductsComponent 
  },
  { 
    path: 'car/details/:id', 
    component: CadDetailsComponent 
  },
  { 
    path: 'car/details/:id/platforms-products', 
    component: CarProductsComponent 
  }
];

이것은 나를 위해 작동합니다. 이 방법으로 라우터는 옵션 ID 매개 변수를 기반으로 다음 경로가 무엇인지 알 수 있습니다.

이 문제의 또 다른 사례를 발견하고 해결책을 찾기 위해 여기에 왔습니다. 내 문제는 내가 아이들을하고 있었고, 구성 요소를 게으르게로드하고 물건을 조금 최적화하는 것이 었습니다. 간단히 말하면 부모 모듈을 느리게로드하는 것입니다. 가장 중요한 것은 경로에서 '/ : id'를 사용하는 것이 었으며 '/'가 그 일부가되는 것에 대한 불만입니다. 정확한 문제는 아니지만 적용됩니다.

부모로부터의 앱 라우팅

...
const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'pathOne',
        loadChildren: 'app/views/$MODULE_PATH.module#PathOneModule'
      },
      {
        path: 'pathTwo',
        loadChildren: 'app/views/$MODULE_PATH.module#PathTwoModule'
      },
...

자식 경로 게으른로드

...
const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: OverviewComponent
      },
      {
        path: ':id',
        component: DetailedComponent
      },
    ]
  }
];
...

나는 언급 할 수 없지만 참조 : 각도 2 선택적 경로 매개 변수

Angular 6 업데이트 :

import {map} from "rxjs/operators"

constructor(route: ActivatedRoute) {
  let paramId = route.params.pipe(map(p => p.id));

  if (paramId) {
    ...
  }
}

Angular6 라우팅에 대한 추가 정보는 https://angular.io/api/router/ActivatedRoute 를 참조 하십시오 .

지연 로딩과 비슷한 문제에 직면 하여이 작업을 수행했습니다.

const routes: Routes = [
  {
    path: 'users',
    redirectTo: 'users/',
    pathMatch: 'full'
  },
  {
    path: 'users',
    loadChildren: './users/users.module#UserssModule',
    runGuardsAndResolvers: 'always'
  },
[...]

그런 다음 구성 요소에서

  ngOnInit() {
    this.activatedRoute.paramMap.pipe(
      switchMap(
        (params: ParamMap) => {
          let id: string = params.get('id');
          if (id == "") {
            return of(undefined);
          }
          return this.usersService.getUser(Number(params.get('id')));
        }
      )
    ).subscribe(user => this.selectedUser = user);
  }

이 방법:

• 없는 경로 /는 경로 로 리디렉션됩니다. 로 인해 pathMatch: 'full'이러한 특정 전체 경로 만 리디렉션됩니다.

• 그러면 users/:id수신됩니다. 실제 경로가 있었다면 users/, id이다 "", 그래서 그것을 확인 ngOnInit하고 그에 따라 행동; 그렇지 않으면 idID이며 진행됩니다.

• 나머지 구성 요소의 역할 selectedUser은 정의되지 않았거나 정의되지 않았습니다 (* ngIf 및 이와 유사한 것).