Angular7-라우팅

라우팅은 기본적으로 페이지 간 이동을 의미합니다. 새 페이지로 연결되는 링크가있는 사이트를 많이 보셨습니다. 이것은 라우팅을 사용하여 달성 할 수 있습니다. 여기서 우리가 언급하는 페이지는 구성 요소의 형태입니다. 우리는 이미 컴포넌트를 생성하는 방법을 보았습니다. 이제 컴포넌트를 생성하고 라우팅을 사용하는 방법을 살펴 보겠습니다.

프로젝트 설정 중에 이미 라우팅 모듈이 포함되어 있으며 아래와 같이 app.module.ts에서 사용할 수 있습니다.

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

AppRoutingModule 위와 같이 추가되고 imports 배열에 포함됩니다.

파일 세부 정보 app-routing.module 아래에 주어진다-

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router';

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

여기서는 프로젝트 설정 중에 라우팅이 추가 될 때이 파일이 기본적으로 생성된다는 점에 유의해야합니다. 추가하지 않은 경우 위의 파일을 수동으로 추가해야합니다.

따라서 위 파일에서 @ angular / router에서 Routes와 RouterModule을 가져 왔습니다.

const가 있습니다 routes경로 유형이 정의되었습니다. 프로젝트에 필요한 모든 경로를 보유하는 배열입니다.

@NgModule에 표시된대로 const 경로가 RouterModule에 제공됩니다. 사용자에게 라우팅 세부 정보를 표시하려면 뷰를 표시하려는 위치에 <router-outlet> 지시문을 추가해야합니다.

아래와 같이 app.component.html에 동일한 내용이 추가됩니다.

<h1>Angular 7 Routing Demo</h1> 
<router-outlet></router-outlet>

이제 다음과 같은 2 개의 구성 요소를 생성하겠습니다. Home 과 Contact Us 라우팅을 사용하여 탐색합니다.

구성 요소 홈

먼저 홈에 대해 논의하겠습니다. 다음은 컴포넌트 홈의 구문입니다-

ng g component home

C:\projectA7\angular7-app>ng g component home CREATE 
src/app/home/home.component.html (23 bytes) CREATE 
src/app/home/home.component.spec.ts (614 bytes) CREATE 
src/app/home/home.component.ts (261 bytes) CREATE 
src/app/home/home.component.css (0 bytes) UPDATE 
src/app/app.module.ts (692 bytes)

부품 문의

다음은 구성 요소 문의 구문입니다-

ng g component contactus

C:\projectA7\angular7-app>ng g component contactus 
CREATE src/app/contactus/contactus.component.html (28 bytes) 
CREATE src/app/contactus/contactus.component.spec.ts (649 bytes) 
CREATE src/app/contactus/contactus.component.ts (281 bytes) 
CREATE src/app/contactus/contactus.component.css (0 bytes) 
UPDATE src/app/app.module.ts (786 bytes)

우리는 구성 요소를 집으로 만들었고 저희에게 연락하십시오. 다음은 app.module.ts의 구성 요소에 대한 세부 정보입니다.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      HomeComponent, 
      ContactusComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ],
   providers: [], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

이제 경로 세부 정보를 app-routing.module.ts 아래와 같이-

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component';

const routes: Routes = [ 
   {path:"home", component:HomeComponent}, 
   {path:"contactus", component:ContactusComponent} 
];
@NgModule({ 
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { }

경로 배열에는 경로 및 구성 요소와 함께 구성 요소 세부 정보가 있습니다. 위와 같이 필수 구성 요소를 가져옵니다.

여기에서 라우팅에 필요한 구성 요소를 app.module.ts 및 app-routing.module.ts로 가져 왔음을 확인해야합니다. 한곳, 즉 app-routing.module.ts에서 가져 오겠습니다.

따라서 라우팅에 사용할 구성 요소 배열을 만들고 app-routing.module.ts에서 배열을 내 보낸 다음 다시 app.module.ts로 가져옵니다. 따라서 app-routing.module.ts에서 라우팅에 사용할 모든 구성 요소가 있습니다.

이것이 우리가 한 방법입니다. app-routing.module.ts −

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ContactusComponent } from './contactus/contactus.component'; 

const routes: Routes = [
   {path:"home", component:HomeComponent},
   {path:"contactus", component:ContactusComponent} 
];
@NgModule({
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
})
export class AppRoutingModule { } export const 
RoutingComponent = [HomeComponent,ContactusComponent];

구성 요소의 배열 즉, RoutingComponent는 다음과 같이 app.module.ts에서 가져옵니다.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt';

@NgModule({ 
   declarations: [ 
      SqrtPipe,
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [],
   bootstrap: [AppComponent] 
})
export class AppModule { }

이제 경로를 정의했습니다. 사용자에게 동일한 내용을 표시해야하므로 app.component.html에 Home 및 Contact Us 버튼 두 개를 추가하고 각 버튼을 클릭하면 <router-outlet> 지시문 안에 컴포넌트 뷰가 표시됩니다. add.component.html에 추가되었습니다.

app.component.html 안에 버튼을 만들고 생성 된 경로의 경로를 제공합니다.

app.component.html

<h1>Angular 7 Routing Demo</h1> 
<nav> 
   <a routerLink = "/home">Home</a> 
   <a routerLink = "/contactus">Contact Us </a> 
</nav> 
<router-outlet></router-outlet>

.html에는 앵커 링크, Home 및 Contact us를 추가하고 routerLink를 사용하여 app-routing.module.ts에서 만든 경로에 대한 경로를 제공했습니다.

이제 브라우저에서 동일하게 테스트 해 보겠습니다.

이것이 우리가 브라우저에서 얻는 방법입니다. 링크를 멋지게 보이도록 스타일을 추가해 보겠습니다.

app.component.css에 다음 CSS를 추가했습니다.

a:link, a:visited { 
   background-color: #848686; 
   color: white; 
   padding: 10px 25px; 
   text-align: center; 
   text-decoration: none; 
   display: inline-block; 
} 
a:hover, a:active {
   background-color: #BD9696;
}

이것은 브라우저의 링크 표시입니다.