Angular에서 'pathmatch: full'은 무엇이며 어떤 효과가 있습니까?

prosource

Angular에서 'pathmatch: full'은 무엇이며 어떤 효과가 있습니까?

probook 2023. 3. 19. 18:19

Angular에서 'pathmatch: full'은 무엇이며 어떤 효과가 있습니까?

여기서는 pathmatch를 full로 사용하여 이 pathmatch를 삭제해도 앱을 로드하거나 프로젝트를 실행하지 않습니다.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent }  from './app.component';
import { WelcomeComponent } from './home/welcome.component';

/* Feature Modules */
import { ProductModule } from './products/product.module';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    RouterModule.forRoot([
      { path: 'welcome', component: WelcomeComponent },
      { path: '', redirectTo: 'welcome', pathMatch: 'full' },
      { path: '**', redirectTo: 'welcome', pathMatch: 'full' }
    ]),
    ProductModule
  ],
  declarations: [
    AppComponent,
    WelcomeComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

기술적으로 정확하지만, 다른 답변은 Angular의 URL-to-route 매칭에 대한 설명에서 도움이 됩니다.처음부터 라우터가 어떻게 기능하는지 모르면 무엇을 하는지 완전히 이해할 수 없다고 생각합니다.

먼저 몇 가지 기본적인 사항을 정의해 보겠습니다.다음 URL을 예로 사용합니다.

당연한 일이지만 먼저 쿼리 파라미터()?from=134와 fragment()#section는 패스 매칭에 관여하지 않는다는 점을 지적합니다.기본 URL()/users/james/articles만 중요합니다.
각도로 URL을 세그먼트로 분할합니다.의 세그먼트(segment)는, 물론, 및 입니다.
라우터 설정은 단일 루트노드를 가진 트리 구조입니다.각 개체는 노드가 될 수 있으며, 노드가 있을 수도 있고, 노드가 있을 수도 있고 리프 노드에는 다른 노드가 있을 수도 있고 리프 노드가 있을 수도 있습니다.

라우터의 목적은 루트노드에서 시작하여 URL의 모든 세그먼트(!!!)와 완전히 일치하는 라우터 컨피규레이션브런치를 찾는 것입니다.이건 정말 중요해요!Angular가 URL 전체와 일치하는 루트 설정 브런치를 찾을 수 없는 경우(이상도 이하도 아님)는 아무것도 렌더링하지 않습니다.

예를 들어, 타겟 URL이 이지만 라우터가 또는 둘 중 하나만을 일치시킬 수 있는 경우 일치하는 것은 없으며 응용 프로그램은 아무것도 렌더링하지 않습니다.

마지막으로, 가 있는 노선은 일반 노선과 조금 다르게 동작하고 있기 때문에, 그 노선은 정말로 누구나 이용하고 싶은 유일한 장소라고 생각합니다만, 나중에 설명하겠습니다.

「」)`prefix`) 「」

이름의 배후에 있는 이유는, 이러한 루트 설정이, 가 나머지 URL 세그먼트의 프리픽스인지 아닌지를 체크하기 위해서입니다.다만, 라우터는 풀 세그먼트만을 조합할 수 있기 때문에, 이 명칭에 약간 혼란이 생깁니다.

어쨌든 루트 레벨의 라우터의 설정은 다음과 같습니다.

const routes: Routes = [
  {
    path: 'products',
    children: [
      {
        path: ':productID',
        component: ProductComponent,
      },
    ],
  },
  {
    path: ':other',
    children: [
      {
        path: 'tricks',
        component: TricksComponent,
      },
    ],
  },
  {
    path: 'user',
    component: UsersonComponent,
  },
  {
    path: 'users',
    children: [
      {
        path: 'permissions',
        component: UsersPermissionsComponent,
      },
      {
        path: ':userID',
        children: [
          {
            path: 'comments',
            component: UserCommentsComponent,
          },
          {
            path: 'articles',
            component: UserArticlesComponent,
          },
        ],
      },
    ],
  },
];

여기서의 모든 개체는 기본 일치 전략( )을 사용합니다.이 전략은 라우터가 설정 트리 전체에 걸쳐 반복하여 URL이 완전히 일치할 때까지 타깃 URL 세그먼트와 세그먼트별로 대조하는 것을 의미합니다.이 예에서는 다음과 같이 처리됩니다.

세그먼트(URL)와 하는 것을 합니다.users.
'products' !== 'users'그러니까 그 브랜치는 건너뛰세요. Check는 가 아닌 Equality Check를 ..startsWith() ★★★★★★★★★★★★★★★★★」.includes() - 전체 세그먼트만 일치합니다!
:other이치노타겟 이 아직 않았습니다(을 일치시켜야 ).james ★★★★★★★★★★★★★★★★★」articles따라서 라우터는 아이를 찾습니다.

의 :othertricks, 「」)!== 'james'일치하지 않습니다.

Angular는 루트 어레이로 되돌아가서 거기에서 계속 진행합니다.
'user' !== 'users, 가지치기, 가지치기, 가지치기, 가지치기.
'users' === 'users가 일치합니다 - 일치합니다. - 일치합니다.그러나 아직 풀매치가 아니기 때문에 어린이를 찾아야 합니다(3단계와 동일).

'permissions' !== 'james'냥냥넘넘넘넘넘넘
:userID이든 일치하기 에, 「」, 「일치」, 「일치」, 「일치」가.james부분.하지만 이건 아직 완전일치는 아니어서, 우리는 그 아이가 맞는 아이를 찾아야 합니다.articles를 클릭합니다.
1. 라는 것을 알 수 .:userIDarticles벽한매!!!!!!!!!!!에 의해, 애플리케이션은 「」를 렌더링 합니다.UserArticlesComponent.

URL(「」URL( )`full`의 명령어플리케이션

예 1

루트 컨피규레이션오브젝트가 다음과 같이 생겼다고 합니다.

{
  path: 'users',
  component: UsersComponent,
  pathMatch: 'full',
  children: [
    {
      path: 'permissions',
      component: UsersPermissionsComponent,
    },
    {
      path: ':userID',
      component: UserComponent,
      children: [
        {
          path: 'comments',
          component: UserCommentsComponent,
        },
        {
          path: 'articles',
          component: UserArticlesComponent,
        },
      ],
    },
  ],
}

의 사용법에 주의해 주세요.이 경우 스텝1 ~ 5는 같지만 스텝6은 다릅니다.

'users' !== 'users/james/articles- 패스 구성이 일치하지 않기 때문에 세그먼트가 일치하지 않습니다.userspathMatch: full 풀 ( 「URL」)과하지 않습니다.users/james/articles.
매치가 없기 때문에 이 브랜치는 생략합니다.
이 시점에서 일치하는 것을 찾지 못한 채 라우터 설정의 끝에 도달했습니다.애플리케이션은 아무것도 렌더링하지 않습니다.

예 2

대신 이렇게 하면 어떨까요?

{
  path: 'users/:userID',
  component: UsersComponent,
  pathMatch: 'full',
  children: [
    {
      path: 'comments',
      component: UserCommentsComponent,
    },
    {
      path: 'articles',
      component: UserArticlesComponent,
    },
  ],
}

users/:userIDpathMatch: full시키는 것은 ''뿐입니다.users/james따라서 다시 일치하지 않으며 응용 프로그램은 아무것도 렌더링하지 않습니다.

예 3

이 점에 대해 생각해 봅시다.

{
  path: 'users',
  children: [
    {
      path: 'permissions',
      component: UsersPermissionsComponent,
    },
    {
      path: ':userID',
      component: UserComponent,
      pathMatch: 'full',
      children: [
        {
          path: 'comments',
          component: UserCommentsComponent,
        },
        {
          path: 'articles',
          component: UserArticlesComponent,
        },
      ],
    },
  ],
}

이 경우:

'users' === 'users만, - '네'는 일치합니다.james/articles여전히 타의 추종을 불허합니다.이들아

'permissions' !== 'james'. - 건너뜁니다.
:userID'시킬 수 세그먼트는이 세그먼트는 1개뿐입니다.을 사용하다jamespathMatch: full.james/articles( 「URL」).그렇게 할 수 없기 때문에 일치하지 않습니다(이 브랜치는 생략합니다).

이 경우에도 URL과 일치하는 것을 찾을 수 없었고 응용 프로그램에서는 아무것도 렌더링하지 않았습니다.

, ★★★★★★★★★★★★★★★★★★★★★★★★★.pathMatch: full설정은 기본적으로 다음과 같습니다.

내 아이들은 무시하고 나만 맞춰라.나머지 모든 URL 세그먼트를 직접 조회할 수 없는 경우 다음으로 넘어갑니다.

리다이렉트

를 정의한 것은 모두 같은 원칙에 따라 타깃 URL과 대조됩니다.여기서 유일한 차이점은 리다이렉트가 세그먼트가 일치하면 즉시 적용된다는 것입니다.즉, 리다이렉트루트가 디폴트전략을 사용하고 있는 경우 부분일치만으로 리다이렉트를 발생시킬 수 있습니다.다음은 좋은 예입니다.

const routes: Routes = [
  {
    path: 'not-found',
    component: NotFoundComponent,
  },
  {
    path: 'users',
    redirectTo: 'not-found',
  },
  {
    path: 'users/:userID',
    children: [
      {
        path: 'comments',
        component: UserCommentsComponent,
      },
      {
        path: 'articles',
        component: UserArticlesComponent,
      },
    ],
  },
];

첫 번째 URL()/users/james/articles의 경우 다음과 같이 처리됩니다.

'not-found' !== 'users' -그만해.
'users' === 'users'합니다. - 일치합니다.
에는 「」가 .redirectTo: 'not-found'이는 즉시 적용됩니다.
이 「URL」로 .not-found.
.not-found지 the 。응용 이 용용프프 applic applic applic applic를 렌더링합니다.NotFoundComponent.

다음으로 루트에도 다음 항목이 있을 경우 어떤 일이 일어날지 생각해 보겠습니다.

const routes: Routes = [
  {
    path: 'not-found',
    component: NotFoundComponent,
  },
  {
    path: 'users',
    pathMatch: 'full',
    redirectTo: 'not-found',
  },
  {
    path: 'users/:userID',
    children: [
      {
        path: 'comments',
        component: UserCommentsComponent,
      },
      {
        path: 'articles',
        component: UserArticlesComponent,
      },
    ],
  },
];

'not-found' !== 'users' -그만해.
users의 첫 만, 설정에는 URL " " " " " " " " 가 합니다.full일치시키므로 건너뜁니다.
'users/:userID'users/jamesarticles아직 일치하지 않지만 이 루트에는 자식이 있습니다.

'어울리지 않다'와 하는 것을 .articles「」해, 애플리케이션은 「URL」을 렌더링 합니다.UserArticlesComponent.

경로 「」 )`path: ''`)

빈 경로는 "사용"하지 않고도 세그먼트를 일치시킬 수 있기 때문에 약간 특수한 경우입니다(따라서 하위 경로는 해당 세그먼트를 다시 일치시켜야 합니다).다음 예를 생각해 보겠습니다.

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'users',
        component: BadUsersComponent,
      }
    ]
  },
  {
    path: 'users',
    component: GoodUsersComponent,
  },
];

예를 들어 다음과 같이 접속하려고 합니다.

path: ''항상 일치하기 때문에 루트는 일치합니다.전체가 .URL은 해야 합니다. 여전히 일치해야 합니다.users!
을 알 수 .users나머지 세그먼트(및 한정!)와 일치하며 완전한 일치가 있습니다.이 '어플리케이션'을 렌더링합니다.BadUsersComponent.

이제 원래의 질문으로 돌아가겠습니다.

OP에서는 다음 라우터 설정을 사용했습니다.

const routes: Routes = [
  {
    path: 'welcome',
    component: WelcomeComponent,
  },
  {
    path: '',
    redirectTo: 'welcome',
    pathMatch: 'full',
  },
  {
    path: '**',
    redirectTo: 'welcome',
    pathMatch: 'full',
  },
];

루트 URL()/로 이동하는 경우 라우터는 다음과 같이 해결합니다.

welcome빈 세그먼트와 일치하지 않으므로 건너뜁니다.
path: ''을 사용하다이 있습니다.pathMatch: 'full'또한 전체 URL을 일치시켰기 때문에 만족합니다(단일 빈 세그먼트가 있습니다).
는 '다행하다'로 합니다.welcome 경우 은 '어플리케이션'을 렌더링합니다.WelcomeComponent.

만만 what면면면면면면면면면면면면면면이?`pathMatch: 'full'`

사실, 사람들은 모든 것이 똑같이 행동할 것이라고 예상할 것이다.단, Angular는 이러한 { path: '', redirectTo: 'welcome' }구성()을 명시적으로 방지합니다.welcome이론적으로 리다이렉트의 무한 루프가 생성됩니다.그래서 Angular는 에러만 발생하므로 어플리케이션은 전혀 동작하지 않습니다(https://angular.io/api/router/Route#pathMatch)).

실제로 Angular는 이러한 끝없는 리다이렉트로부터도 보호를 실장하고 있기 때문에, 라우팅 레벨 마다 1개의 리다이렉트 밖에 실행할 수 없습니다.그러면 다음 예에서 볼 수 있듯이 모든 리다이렉트가 중지됩니다.

★★는?`path: '**'`

path: '**' 는, 의 유무에 관계없이(af/frewf/321532152/fsa일치) 모든 것에 일치합니다.

또한 모든 것과 일치하기 때문에 루트 경로도 포함되어 있기 때문에 이 설정에서는 완전히 장황해집니다.

이상하게도, 다음과 같은 설정을 실시해도 문제 없습니다.

const routes: Routes = [
  {
    path: '**',
    redirectTo: 'welcome'
  },
  {
    path: 'welcome',
    component: WelcomeComponent,
  },
];

에 네비게이트 하면 일치하고 welcome으로 리다이렉트 됩니다.이론적으로는 리다이렉트의 무한 루프가 시작되지만 Angular는 리다이렉트를 즉시 정지하고(앞에서 설명한 보호 때문에) 모든 것이 정상적으로 동작합니다.

RouterModule.forRoot([
      { path: 'welcome', component: WelcomeComponent },
      { path: '', redirectTo: 'welcome', pathMatch: 'full' },
      { path: '**', component: 'pageNotFoundComponent' }
    ])

1 ★★★★★★★ pathMatch:'full'때 : 이우경 : : : : : : : : : : : : :localhost:4200( 서버)화면이 경우 은 (서버의 경우)로 되어 있기 때문입니다. URL »https://localhost:4200/

ifhttps://localhost:4200/gibberish다음 이유로 pageNotFound 화면으로 리다이렉트 됩니다.path:'**'

2 pathMatch:'prefix':

에 'Da'가 있는 { path: '', redirectTo: 'welcome', pathMatch: 'prefix' }이 "URL"과 path:''정의되어 있습니다.

pathMatch = 'full'하지 않는 패스 합니다.

pathMatch = 'prefix'는 나머지 URL이 리다이렉트루트의 프리픽스 패스로 시작할 때 리다이렉트루트를 대조하도록 라우터에 지시합니다.

참고 자료: https://angular.io/guide/router#set-up-redirects

pathMatch: 'full' 소비되는

pathMatch: 'prefix'첫 루트가은 나머지 일치하는 합니다.

경로 일치 전략. 'prefix' 또는 'full' 중 하나입니다.기본값은 'prefix'입니다.

기본적으로는 라우터는 왼쪽에서 URL 요소를 체크하여 URL이 지정된 경로와 일치하는지 여부를 확인하고 일치하면 중지합니다.예를 들어 '/team/11/user'는 'team/:id'와 일치합니다.

경로 일치 전략은 전체 URL에 대해 "full"로 일치합니다.이것은 빈 경로 루트를 리다이렉트 할 때 중요합니다.그렇지 않으면 빈 경로는 URL의 프리픽스이기 때문에 라우터는 리다이렉트 수신처에 네비게이트 할 때에도 리다이렉트를 적용하여 엔드리스 루프가 생성됩니다.

출처 : https://angular.io/api/router/Route#properties

Angular의 기본 동작은 모든 경로에 대해 {pathMatch: 'prefix'}입니다.

다음 두 가지 차이점에 대해 살펴보겠습니다.

pathMatch: 'syslog' => Angular는 루트 배열 내의 경로 접두사(URL)를 검색합니다.

pathMatch: 'full' => Angular가 루트 배열 내의 정확한 경로(URL)를 검색합니다.

언급URL : https://stackoverflow.com/questions/42992212/in-angular-what-is-pathmatch-full-and-what-effect-does-it-have

'prosource' 카테고리의 다른 글

Typescript에서 인터페이스를 구현할 때 개인 속성을 정의하는 방법은 무엇입니까? (0)	2023.03.19
Vue Axios CORS 정책:'액세스 제어-허용-발신원' 없음 (0)	2023.03.19
BEGIN_OBJECT를 개조해야 하지만 BEGIN_ARRAY였습니다. (0)	2023.03.19
Redx에서 직접 "store.dispatch"가 아닌 "this.props.dispatch"를 사용하는 이유는 무엇입니까? (0)	2023.03.19
스프링 데이터(JPA)에서 파생된 쿼리에서 여러 속성을 기준으로 정렬하려면 어떻게 해야 합니까? (0)	2023.03.19

현재글Angular에서 'pathmatch: full'은 무엇이며 어떤 효과가 있습니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

reactjs, GIT, MySQL, AngularJS, ASP.NET, TypeScript, mariaDB, Ajax, sql-server, Python, WPF, MongoDB, oracle, jQuery, Excel, JSON, C, spring-boot, PowerShell, WordPress,

Today :
Yesterday :

probook

Angular에서 'pathmatch: full'은 무엇이며 어떤 효과가 있습니까?

Angular에서 'pathmatch: full'은 무엇이며 어떤 효과가 있습니까?

「」)`prefix`) 「」

URL(「」URL( )`full`의 명령어플리케이션

예 1

예 2

예 3

리다이렉트

경로 「」 )`path: ''`)

이제 원래의 질문으로 돌아가겠습니다.

만만 what면면면면면면면면면면면면면면이?`pathMatch: 'full'`

★★는?`path: '**'`

'prosource' 카테고리의 다른 글

'prosource'의 다른글

티스토리툴바

« 2024/09 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Angular에서 'pathmatch: full'은 무엇이며 어떤 효과가 있습니까?

Angular에서 'pathmatch: full'은 무엇이며 어떤 효과가 있습니까?

「」)prefix) 「」

URL(「」URL( )full의 명령어플리케이션

예 1

예 2

예 3

리다이렉트

경로 「 」 )path: '')

이제 원래의 질문으로 돌아가겠습니다.

만만 what면면면면면면면면면면면면면면이?pathMatch: 'full'

★★는?path: '**'

'prosource' 카테고리의 다른 글

'prosource'의 다른글

관련글

티스토리툴바

「」)`prefix`) 「」

URL(「」URL( )`full`의 명령어플리케이션

경로 「」 )`path: ''`)

만만 what면면면면면면면면면면면면면면이?`pathMatch: 'full'`

★★는?`path: '**'`