Angular에서 현재 경로 가져오기

1. 인터넷에서 경로의 정의와 사용
2. Angular에서 현재 경로를 가져오는 단계
3. Angular에서 현재 경로를 가져오는 HTML 템플릿 만들기

Angular 라우터는 애플리케이션 탐색을 가능하게 하는 강력한 도구입니다. 단일 페이지 응용 프로그램을 빌드하는 데 필수적인 구성 요소입니다.

이 문서는 Angular 라우터에 관한 것입니다. Angular에서 현재 경로를 얻는 방법을 배우는 것이 도움이 될 것입니다.

Angular는 사용자에게 현재 경로를 제공하고 다른 경로로의 탐색을 허용하는 프런트 엔드 앱용 라우터를 제공합니다. 또한 Angular 라우터는 양방향 데이터 바인딩을 제공하므로 데이터 변경 사항이 보기와 URL 모두에 반영됩니다.

인터넷에서 경로의 정의와 사용

우리는 경로 없이 인터넷을 실행할 수 없습니다. 경로는 인터넷의 콘텐츠에 액세스하는 데 사용됩니다. 모든 기사, 동영상 및 기타 콘텐츠를 한 곳에서 액세스할 수 있는 서비스입니다.

경로를 사용하여 보고 싶은 페이지를 사이트 서버에 알립니다. 예를 들어 /Angular (web framework)에 관심이 있음을 www.wikipedia.com에 알립니다.

https://en.wikipedia.org/wiki/Angular_(web_framework)

위의 링크는 AngularJS 프레임워크로 연결됩니다. 서버는 경로를 사용하여 방문하려는 페이지를 정확하게 결정할 수 있습니다.

또한 일반적으로 사람이 읽을 수 있습니다. 서버가 어디로 가야 하는지 명확하지 않을 뿐만 아니라 사용자에게도 명확합니다.

링크에서 /Angular를 원하는 하위 위키의 이름으로 바꾸면 완료됩니다. 검색을 사용하거나 버튼을 클릭하지 않고도 거기에 도달할 수 있습니다.

오랜 기간 동안 기본 형식이었기 때문에 브라우저는 경로를 상당히 잘 처리할 수 있습니다. 사용자의 탐색을 쉽게 모니터링하고 뒤로 버튼 또는 기록과 같은 기능을 제공할 수 있습니다.

여기를 클릭 경로에 대해 자세히 알아보세요.

Angular에서 현재 경로를 가져오는 단계

Angular는 라우팅을 위한 강력하고 포괄적인 라이브러리를 제공합니다. Angular 라우팅의 기본 사항을 이해하고 현재 경로를 얻는 방법에 대해 논의해 보겠습니다.

위에서 언급한 단계를 사용하여 Angular에서 현재 경로를 가져오는 완전한 예를 작성합니다.

라우팅 서비스는 경로 및 경로 매개변수를 정의하기 위한 API 세트를 제공합니다. Angular 라우터는 서로 다른 URL에 대해 여러 보기를 사용하도록 구성할 수 있으므로 각각 보기가 있는 두 섹션이 있는 한 페이지를 가질 수 있습니다.

RouterModule에는 모든 라우팅 관련 정보가 포함되어 있습니다. 이 모듈에는 Angular가 포함되어 있습니다. 라우팅을 사용하려면 해당 모듈을 AppModule로 가져와야 합니다.

그렇다면 라우팅을 어떻게 구현할까요? 이전에 언급했듯이 RouterModule.을 가져오는 것으로 시작합니다.

import { Router, Event, NavigationStart, NavigationEnd, NavigationError} from '@angular/router';

이제 앱을 라우팅할 준비가 되었습니다. 애플리케이션에서 사용할 수 있는 경로를 지정해야 합니다.

동시에 특정 경로에 표시할 구성 요소를 결정할 것입니다. 그러나 기본부터 시작하겠습니다.

경로를 정의하기 위해 별도의 라우팅 파일을 작성하는 것이 좋습니다. Module+.routing.ts는 이 라우팅 파일의 가장 일반적인 이름입니다. AppModule에 대한 라우팅 파일을 만들기 위해 app-routing.module.ts를 호출합니다.

따라서 app.module.ts 파일에 인접한 파일을 만들어 보겠습니다. 모듈의 모든 경로를 포함하는 해당 파일에 정적 배열을 빌드합니다.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutusComponent } from './aboutus/aboutus.component';
import { AppComponent } from './app.component';

import { ServicesComponent } from './services/services.component';

const routes: Routes = [
  {path: '', redirectTo: 'AppComponent', pathMatch: 'full'},

  {path:'aboutus', component:AboutusComponent},

  {path:'services', component:ServicesComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

여기서 우리가 정의한 Routes 배열이 가장 중요한 요소입니다. 우리는 그 배열 안에 우리의 경로를 정의할 수 있습니다.

이러한 경로는 보시다시피 개체로 정의됩니다. 각각에 경로 속성이 있습니다.

예를 들어 aboutusComponent의 경로는 /aboutus입니다. 여기에서 가변 매개변수를 사용하여 경로를 구성할 수도 있습니다.

예를 들어 blog 경로 아래에 blog 구성 요소가 있을 수 있습니다. 그러나 이 구성 요소가 경로에 따라 다른 블로그를 표시하기를 원합니다.

우리는 블로그의 ID를 경로에 추가하여 이를 수행합니다.

Angular에서 현재 경로를 가져오는 HTML 템플릿 만들기

언급된 단계를 수행한 후에는 HTML 파일에서 작업하여 현재 경로를 가져올 차례입니다. 이를 위해 라우터 링크를 사용합니다.

routerLink 속성을 사용하여 HTML 문서에서 앱의 경로를 직접 연결할 수 있습니다. HTML 요소 내에 지시문을 배치합니다.

Angular는 방문자가 구성 요소를 클릭할 때 현재 경로를 표시합니다.

<h3>Example of How to get Current Route in Angular</h3>

<ul>
   <li routerLinkActive="active">
      <a [routerLink]="['/aboutus']">About Us</a>
   </li>
   <li routerLinkActive="active">
      <a [routerLink]="['/services']">Services</a>
   </li>

</ul>

The current Route is {{currentRoute}}

<router-outlet></router-outlet>

또한 여기에서는 라우터 콘센트를 사용했습니다. 라우터의 콘센트인 router-outlet은 라우터의 자리 표시자 역할을 하는 RouterModule에 의해 생성된 속성으로, 일치하는 구성 요소가 삽입되어야 하는 위치를 나타냅니다.

응용 프로그램 셸은 라우터 콘센트가 포함된 구성 요소를 나타냅니다.

<router-outlet></router-outlet>

동일한 애플리케이션에서 Angular 라우터는 많은 콘센트를 허용합니다. 기본 콘센트는 기본(또는 최상위) 콘센트입니다.

마지막으로, 콘센트 속성을 사용하면 경로 사양에 대한 대상 콘센트를 정의할 수 있습니다.

Angular에서 현재 경로를 가져오는 마지막 단계에 대해 작업해 보겠습니다. 이를 위해 app.component.ts 파일을 생성해 보겠습니다.

애플리케이션에서 about us와 services라는 두 개의 경로를 만들었습니다. 모듈이 가능한 한 독립적이기를 원하기 때문에 모든 하위 경로는 모듈 내의 별도 파일에 정의됩니다.

import { Component } from '@angular/core';
import { Router, Event, NavigationStart, NavigationEnd, NavigationError} from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  currentRoute: string;
  constructor(private router: Router) {
    this.currentRoute = "Demo";
    this.router.events.subscribe((event: Event) => {

        if (event instanceof NavigationEnd) {
            this.currentRoute = event.url;
              console.log(event);
        }


    });

}
}

여기서 NavigationEnd는 이벤트에 의해 트리거되거나 탐색이 원활하게 종료될 때 호출되는 라우터입니다. 라우터 이벤트에 대해 자세히 알아보려면 여기를 클릭하십시오.

서비스 섹션을 클릭하면 현재 서비스 경로가 표시되고 회사 소개 섹션에서도 동일한 일이 발생합니다.

또한 요구 사항에 따라 섹션을 수정할 수도 있습니다.

여기를 클릭 위에서 언급한 코드의 라이브 데모를 확인하십시오.