Angular7 - Định tuyến

Định tuyến về cơ bản có nghĩa là điều hướng giữa các trang. Bạn đã thấy nhiều trang web có các liên kết dẫn bạn đến một trang mới. Điều này có thể đạt được bằng cách sử dụng định tuyến. Ở đây, các trang mà chúng tôi đang đề cập đến sẽ ở dạng các thành phần. Chúng ta đã biết cách tạo một thành phần. Bây giờ chúng ta hãy tạo một thành phần và xem cách sử dụng định tuyến với nó.

Trong quá trình thiết lập dự án, chúng tôi đã bao gồm mô-đun định tuyến và mô-đun này cũng có sẵn trong app.module.ts như hình dưới đây -

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 được thêm vào như được hiển thị ở trên và được bao gồm trong mảng nhập khẩu.

Chi tiết tệp của app-routing.module được đưa ra dưới đây -

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

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

Ở đây, chúng tôi phải lưu ý rằng tệp này được tạo theo mặc định khi định tuyến được thêm vào trong quá trình thiết lập dự án. Nếu không được thêm, các tệp trên phải được thêm theo cách thủ công.

Vì vậy, trong tệp ở trên, chúng tôi đã nhập Routes và RouterModule từ @ angle / router.

Có một const routesđược xác định thuộc loại Routes. Nó là một mảng chứa tất cả các tuyến đường mà chúng ta cần trong dự án của mình.

Các tuyến const được cấp cho RouterModule như được hiển thị trong @NgModule. Để hiển thị chi tiết định tuyến cho người dùng, chúng ta cần thêm chỉ thị <router-outlet> vào nơi chúng ta muốn chế độ xem được hiển thị.

Điều tương tự cũng được thêm vào app.component.html như hình dưới đây−

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

Bây giờ chúng ta hãy tạo 2 thành phần được gọi là Home và Contact Us và điều hướng giữa chúng bằng cách sử dụng định tuyến.

Trang chủ thành phần

Đầu tiên, chúng ta sẽ thảo luận về Trang chủ. Sau đây là cú pháp cho Trang chủ Thành phần:

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)

Thành phần Liên hệ với chúng tôi

Sau đây là cú pháp cho Thành phần Liên hệ với chúng tôi -

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)

Chúng tôi đã hoàn tất việc tạo thành phần nhà và liên hệ với chúng tôi. Dưới đây là chi tiết về các thành phần trong 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 { }

Bây giờ hãy để chúng tôi thêm chi tiết các tuyến đường trong app-routing.module.ts như hình dưới đây -

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

Mảng các tuyến có các chi tiết thành phần với đường dẫn và thành phần. Thành phần bắt buộc được nhập như hình trên.

Ở đây, chúng ta cần lưu ý rằng các thành phần chúng ta cần để định tuyến được nhập trong app.module.ts và cả trong app-routing.module.ts. Hãy để chúng tôi nhập chúng vào một nơi, tức là trong app-routing.module.ts.

Vì vậy, chúng tôi sẽ tạo một mảng thành phần được sử dụng để định tuyến và sẽ xuất mảng trong app-routing.module.ts và nhập lại nó trong app.module.ts. Vì vậy, chúng tôi có tất cả các thành phần được sử dụng để định tuyến trong app-routing.module.ts.

Đây là cách chúng tôi đã làm điều đó 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];

Mảng các thành phần tức là RoutingComponent được nhập vào app.module.ts như sau:

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

Vì vậy, bây giờ chúng ta đã hoàn tất việc xác định các tuyến đường. Chúng tôi cần hiển thị giống nhau cho người dùng, vì vậy hãy thêm hai nút, Trang chủ và Liên hệ với chúng tôi trong app.component.html và khi nhấp vào các nút tương ứng, nó sẽ hiển thị chế độ xem thành phần bên trong chỉ thị <router-outlet> mà chúng tôi đã thêm vào add.component.html.

Tạo nút bên trong app.component.html và cung cấp đường dẫn đến các tuyến đã tạo.

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>

Trong .html, chúng tôi đã thêm các liên kết neo, Trang chủ và Liên hệ với chúng tôi và sử dụng routerLink để cung cấp đường dẫn đến các tuyến mà chúng tôi đã tạo trong app-routing.module.ts.

Bây giờ chúng ta hãy thử nghiệm tương tự trong trình duyệt -

Đây là cách chúng tôi lấy nó trong trình duyệt. Hãy để chúng tôi thêm một số kiểu để làm cho các liên kết trông đẹp.

Chúng tôi đã thêm css sau vào app.component.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;
}

Đây là màn hình hiển thị các liên kết trong trình duyệt -

Bấm vào liên kết Home, để xem chi tiết thành phần của nhà như hình bên dưới -

Nhấp vào Liên hệ với chúng tôi, để xem chi tiết thành phần của nó như được cung cấp bên dưới -

Khi bạn nhấp vào liên kết, bạn cũng sẽ thấy url của trang trong thanh địa chỉ thay đổi. Nó nối các chi tiết đường dẫn ở cuối trang như trong ảnh chụp màn hình ở trên.