Angular의 보조 경로

이 기사에서는 보조 경로의 작동 방식, 명명된 라우터 아웃렛을 정의 및 설정하는 방법, Angular 애플리케이션에서 이를 구현하는 모범 사례를 살펴보겠습니다.

보조 경로란 무엇입니까?

보조 경로라고도 하는 보조 경로를 사용하면 Angular 애플리케이션에 여러 개의 독립적인 경로를 추가하여 앱의 탐색 및 상호 작용 기능을 향상시킬 수 있습니다. 페이지의 주요 콘텐츠를 결정하는 기본 경로와 달리 보조 경로는 사용자의 기본 보기를 방해하지 않고 기본 콘텐츠와 함께 표시될 수 있는 보조 콘텐츠로 작동합니다. 일반적으로 사이드바, 모달 또는 인터페이스의 추가 섹션과 같은 구성 요소에 사용됩니다.

Angular의 각 구성 요소에는 하나의 기본 경로와 여러 개의 보조 콘센트가 있을 수 있으며 구성 요소 내에서 고유한 이름을 가져야 합니다.

보조 경로 설정

보조 경로를 정의하려면 보조 경로에 대한 콘텐츠를 렌더링하려는 템플릿에 명명된 라우터 아웃렛을 생성해야 합니다. 이러한 방식으로 여러 아웃렛을 설정하면 UI의 다양한 부분을 독립적으로 관리할 수 있습니다.

Angular에서 보조 경로를 설정하는 방법에 대한 단계별 가이드는 다음과 같습니다.

1단계: 명명된 라우터 콘센트 정의

보조 경로를 사용하려면 먼저 보조 경로 콘텐츠를 표시할 템플릿에 명명된 콘센트를 추가하세요. 예:

<div>
    <router-outlet name="pages"></router-outlet>
</div>

<!-- Primary router-outlet for main content -->
<router-outlet></router-outlet>

여기에는 보조 경로 콘텐츠가 렌더링될 명명된 콘센트가 있습니다. 일반적으로 기본 탐색에 사용되는 기본 라우터 콘센트와 별개로 별도의 경로 콘텐츠를 표시할 수 있습니다.

2단계: 라우터에서 보조 경로 구성

템플릿에서 명명된 콘센트를 설정한 후 라우터 구성에서 보조 경로를 정의하세요. Angular는 경로 정의의 콘센트 속성을 사용하여 경로를 렌더링해야 하는 콘센트를 지정합니다.

예:

const routes = [
    {
        path: '',
        loadComponent: () =>
            import('./pages/homepage/homepage.component').then(c => c.HomepageComponent)
    },
    {
        path: 'experience',
        loadComponent: () =>
            import('./pages/experience/experience.component').then(c => c.ExperienceComponent),
        outlet: 'pages'  // Specify the named outlet for this route
    }
];

이 예에서는:

기본 경로(빈 경로)는 HomepageComponent를 로드합니다.
경험 경로는 ExperienceComponent를 페이지 아웃렛에 로드하는 보조 경로입니다.

3단계: 보조 경로 탐색

보조 경로로 이동하려면 특정 구문과 함께 Angular의 RouterLink 지시어를 사용하세요. 보조 경로에는 기본 경로와 보조 경로를 모두 지정하는 분할된 URL 구조가 필요합니다.

예:

<a outlets: primary: pages:>Experience</a>

onNavigate(link: string) {
   this.router.navigate([{ outlets: { primary: '', pages: 'experience' } }]);
}

여기서 기본은 기본 콘텐츠 경로(이 경우 홈페이지의 빈 경로) 및 페이지에 해당합니다. 'experience'는 명명된 아웃렛 페이지에 대한 보조 경로를 설정합니다.

4단계: 프로그래밍 방식으로 보조 경로에 액세스

Angular의 라우터 서비스를 사용하여 프로그래밍 방식으로 보조 경로를 탐색할 수도 있습니다. 보조 경로를 설정하려면 탐색 메소드에 전달된 객체에 기본 경로 경로와 보조 경로 경로를 모두 지정하세요.

이 코드는 기본 아웃렛의 홈페이지로 이동하고 페이지의 보조 아웃렛에서 ExperienceComponent를 엽니다.

일반적인 사용 사례

사이드바: 기본 콘텐츠를 방해하지 않고 링크나 설정이 포함된 사이드바를 전환하려면 보조 경로를 사용하세요.
모달 및 대화 상자: 보조 경로를 사용하면 모달을 쉽게 열고 닫을 수 있어 사용자가 대화 상자에서 세부 정보를 보거나 정보를 편집할 수 있습니다.
채팅 또는 알림 패널: 기본 콘텐츠와 별도로 실시간 채팅, 알림 또는 실시간 피드를 표시합니다.

자세한 토크 영상:

결론

Angular의 보조 경로는 애플리케이션의 여러 섹션을 독립적으로 관리할 수 있는 유연한 방법을 제공합니다. 명명된 라우터 아웃렛을 정의하고 아웃렛 속성으로 경로를 구성하면 원활한 모듈식 사용자 환경을 만들 수 있습니다. 보조 경로는 인터페이스의 일부가 독립적으로 작동할 수 있도록 허용하므로 복잡한 UI 구조를 가진 애플리케이션에 특히 유용합니다. 이 설정을 사용하면 사용자에게 더욱 매력적이고 반응이 빠른 경험을 제공할 수 있습니다.

Angular 프로젝트에서 보조 경로를 실험하여 앱의 탐색 및 상호 작용을 어떻게 변화시키고 특정 요구 사항에 맞게 UX를 조정할 수 있는지 알아보세요.

위 내용은 Angular의 보조 경로의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!