Angular7 - Yönlendirme

Yönlendirme, temel olarak sayfalar arasında gezinmek anlamına gelir. Sizi yeni bir sayfaya yönlendiren bağlantıları olan birçok site gördünüz. Bu, yönlendirme kullanılarak elde edilebilir. Burada bahsettiğimiz sayfalar bileşenler şeklinde olacaktır. Bir bileşenin nasıl oluşturulacağını zaten gördük. Şimdi bir bileşen oluşturalım ve onunla rotayı nasıl kullanacağımızı görelim.

Proje kurulumu sırasında, yönlendirme modülünü zaten dahil ettik ve aynısı aşağıda gösterildiği gibi app.module.ts'de de mevcuttur -

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 yukarıda gösterildiği gibi eklenir ve içe aktarmalar dizisine dahil edilir.

Dosya ayrıntıları app-routing.module aşağıda verilmiştir -

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

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

Burada, proje kurulumu sırasında yönlendirme eklendiğinde bu dosyanın varsayılan olarak oluşturulduğunu not etmeliyiz. Eklenmezse, yukarıdaki dosyaların manuel olarak eklenmesi gerekir.

Dolayısıyla yukarıdaki dosyada, @ angular / router'dan Routes ve RouterModule'u içe aktarmıştık.

Bir sabit var routesRoutes türünde tanımlanmıştır. Projemizde ihtiyacımız olan tüm rotaları içinde barındıran bir dizidir.

Const yolları, @NgModule'da gösterildiği gibi RouterModule'a verilir. Yönlendirme ayrıntılarını kullanıcıya görüntülemek için, görünümün görüntülenmesini istediğimiz yere <router-outlet> yönergesini eklememiz gerekir.

Aynısı aşağıda gösterildiği gibi app.component.html'ye eklenir−

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

Şimdi olarak adlandırılan 2 bileşen oluşturalım Home ve Contact Us yönlendirmeyi kullanarak aralarında gezinin.

Bileşen Ana Sayfası

İlk önce Ev hakkında konuşacağız. Bileşen Ana Sayfa sözdizimi aşağıdadır -

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)

Bileşen Bize Ulaşın

Bileşen Bize Ulaşın sözdizimi aşağıdadır -

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)

Bileşenleri oluşturmayı tamamladık ve bizimle iletişime geçtik. App.module.ts içindeki bileşenlerin ayrıntıları aşağıdadır -

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 { }

Şimdi rota detaylarını ekleyelim app-routing.module.ts aşağıda gösterildiği gibi -

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 { }

Yönler dizisi, yol ve bileşenle birlikte bileşen ayrıntılarına sahiptir. Gerekli bileşen yukarıda gösterildiği gibi içe aktarılır.

Burada, yönlendirme için ihtiyaç duyduğumuz bileşenlerin app.module.ts ve ayrıca app-routing.module.ts içine içe aktarıldığını fark etmemiz gerekir. Bunları tek bir yere, yani app-routing.module.ts'e aktaralım.

Bu nedenle, yönlendirme için kullanılacak bir bileşen dizisi oluşturacağız ve diziyi app-routing.module.ts içine dışa aktaracağız ve tekrar app.module.ts içine içe aktaracağız. Bu nedenle, app-routing.module.ts'de yönlendirme için kullanılacak tüm bileşenlere sahibiz.

Biz böyle yaptık 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];

Bileşenler dizisi, yani RoutingComponent, app.module.ts içine aşağıdaki şekilde içe aktarılır -

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 { }

Artık rotaları belirlemeyi bitirdik. Aynı şeyi kullanıcıya göstermemiz gerekiyor, bu yüzden app.component.html'de Ana Sayfa ve Bize Ulaşın ve ilgili düğmelere tıklandığında bileşen görünümünü <router-outlet> yönergesi içinde gösterecek iki düğme ekleyelim. add.component.html dosyasına eklendi.

App.component.html içinde düğme oluşturun ve oluşturulan rotaların yolunu verin.

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 içine bağlantı bağlantıları, Ana Sayfa ve Bize Ulaşın ekledik ve app-routing.module.ts'de oluşturduğumuz rotaların yolunu vermek için routerLink'i kullandık.

Şimdi aynısını tarayıcıda test edelim -

Tarayıcıya bu şekilde ulaşıyoruz. Bağlantıların güzel görünmesi için biraz stil ekleyelim.

App.component.css'ye aşağıdaki css'i ekledik -

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;
}

Bu, tarayıcıdaki bağlantıların görüntüsüdür -

Aşağıda gösterildiği gibi ana sayfa bileşen ayrıntılarını görmek için Ana Sayfa bağlantısını tıklayın -

Aşağıda verilen bileşen ayrıntılarını görmek için Bize Ulaşın'a tıklayın -

Bağlantıya tıkladığınızda, adres çubuğundaki sayfa url'sinin de değiştiğini göreceksiniz. Yol detaylarını yukarıda gösterilen ekran görüntüsünde görüldüğü gibi sayfanın sonuna ekler.