[javascript] 각도 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 매개 변수를 기반으로 다음 경로가 무엇인지 알 수 있습니다.