각도 2 옵션 경로 매개 변수

각도 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/'},
{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 이동 하면 무엇을하든 다시 실행되지 않습니다 .

Don't forget to put the <router-outlet></router-outlet> in the User's template.

---

With angular4 we just need to organise routes together in hierarchy

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

This works for me . This way router know what is the next route based on option id parameters.

---

Ran into another instance of this problem, and in searching for a solution to it came here. My issue was that I was doing the children, and lazy loading of the components as well to optimize things a bit. In short if you are lazy loading the parent module. Main thing was my using '/:id' in the route, and it's complaints about '/' being a part of it. Not the exact problem here, but it applies.

App-routing from parent

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

Child routes lazy loaded

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

---

The suggested answers here, including the accepted answer from rerezz which suggest adding multiple route entries work fine.

However the component will be recreated when changing between the route entries, i.e. between the route entry with the parameter and the entry without the parameter.

If you want to avoid this, you can create your own route matcher which will match both routes:

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

Then use the matcher in your route config:

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

---

I can't comment, but in reference to: Angular 2 optional route parameter

an update for Angular 6:

import {map} from "rxjs/operators"

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

  if (paramId) {
    ...
  }
}

See https://angular.io/api/router/ActivatedRoute for additional information on Angular6 routing.

---

Facing a similar problem with lazy loading I have done this:

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

And then in the component:

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

This way:

• The route without / is redirected to the route with. Because of the pathMatch: 'full', only such specific full route is redirected.

• Then, users/:id is received. If the actual route was users/, id is "", so check it in ngOnInit and act accordingly; else, id is the id and proceed.

• The rest of the componect acts on selectedUser is or not undefined (*ngIf and the things like that).

참고URL : https://stackoverflow.com/questions/34208745/angular-2-optional-route-parameter