Kiến thức cơ bản về Angular: Cách thêm định tuyến
Chuyển từ trang này sang trang khác là một nhiệm vụ khá cơ bản đối với một ứng dụng web. May mắn thay, Angular có hỗ trợ tuyệt vời cho việc định tuyến.
Nếu bạn đang tạo một ứng dụng Angular với nhiều trang, bạn cần sử dụng định tuyến để điều hướng giữa chúng. Bạn có thể thực hiện việc này bằng cách tạo danh sách các tuyến với đường dẫn cho mỗi trang trong mô-đun định tuyến.
Sau đó, bạn có thể định tuyến đến các trang khác trong tệp HTML bằng cách sử dụng thẻ liên kết. Bạn cũng có thể định tuyến đến các trang khác trong tệp TypeScript, sử dụng phương thức router.navigate ().
Mục Lục
Cách tạo một trang mới trong ứng dụng Angular
Đầu tiên, tạo một ứng dụng Angular mới. Bạn cũng có thể sử dụng một cái hiện có. Nếu bạn chưa quen với cách tạo một ứng dụng Angular mới, bạn có thể tìm hiểu về nó cùng với các khái niệm giới thiệu khác được sử dụng trong Angular.
- Tạo một thành phần mới trong ứng dụng Angular của bạn bằng cách sử dụng ng tạo thành phần yêu cầu:
ng generate component home - Mở src / app / home / home.component.html và thay thế nội dung hiện tại bằng nội dung mới.
<div class="content">
<h2> Home </h2>
<p>
I am a photographer that does wedding photography. Check out my projects!
</p>
<div class="card">
<h4> John & Amy </h4>
<p> Blue Mountains, Australia </p>
</div>
<div class="card">
<h4> Ross & Rach </h4>
<p> Hunter Valley Gardens, Australia </p>
</div>
</div> - Điền vào src / app / home / home.component.css tệp có kiểu dáng cho nội dung HTML.
.content {
line-height: 2rem;
font-size: 1.2em;
}.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width: 400px;
padding: 16px;
margin: 24px 0px;
background-color: whitesmoke;
font-family: sans-serif;
} - Tạo một thành phần khác bằng cách sử dụng ng tạo thành phần lệnh trong thiết bị đầu cuối. Bạn sẽ sử dụng thành phần mới làm trang giới thiệu.
ng generate component about - Mở src / app / about / about.component.html và thay thế nội dung hiện tại bằng nội dung mới.
<div class="content">
<h2> About Me </h2>
<p>
I'm John, and I love taking photos. I have been taking photos for over 25 years. Visit me on my social media:
</p>
<a href=""> Facebook </a> <br>
<a href=""> LinkedIn </a> <br>
<a href=""> Instagram </a> <br>
</div> - Điền vào src / app / about / about.component.css tệp có kiểu dáng cho nội dung HTML.
.content {
line-height: 2rem;
font-size: 1.2em;
}
Cách điều hướng giữa hai trang
Bạn có thể sử dụng định tuyến để điều hướng từ trang này sang trang khác. Bạn có thể cấu hình điều này trong một tệp định tuyến. Ví dụ này sẽ có một tệp định tuyến cho toàn bộ ứng dụng, nằm ở src / app / app-routing.module.ts.
- Nếu ứng dụng của bạn chưa có tệp mô-đun định tuyến ứng dụng, bạn có thể tạo một tệp bằng cách sử dụng ng tạo mô-đun yêu cầu. Trong dòng lệnh hoặc dòng lệnh, điều hướng đến thư mục gốc của ứng dụng và chạy lệnh sau:
ng generate module app-routing --module app --flat - Thao tác này sẽ tạo tệp app-routing.module.ts trong src / app thư mục.
- Ở đầu tệp, thêm các mục nhập bổ sung cho các thành phần Trang chủ và Giới thiệu. Đảm bảo rằng bạn cũng nhập RouterModule và CommonModule; cuối cùng, các câu lệnh nhập của bạn sẽ giống như sau:
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component'; - Bên dưới phần nhập, hãy thêm một mảng đường dẫn mới để lưu trữ các đường dẫn mà bạn sẽ sử dụng khi định tuyến đến từng trang.
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
]; - Thay thế khối NgModule bằng khối sau, khối này sẽ thêm RouterModule vào mảng nhập và xuất.
@NgModule({
declarations: [],
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [RouterModule]
}) - bên trong src / app / app.component.html xóa nội dung hiện tại và thêm thẻ bộ định tuyến-ổ cắm.
<div class="container">
<router-outlet></router-outlet>
</div>
Cách điều hướng đến trang mới trong tệp HTML
Để điều hướng đến một trang trong tệp HTML, hãy sử dụng thẻ liên kết. Trong thuộc tính href, thêm đường dẫn mà bạn đã chỉ định trong mảng tuyến đường.
- bên trong src / app / app.component.html , hãy thêm hai thẻ liên kết trước div vùng chứa. Điều này sẽ cho phép bạn điều hướng giữa Trang chủ và Trang giới thiệu.
<div class="navbar">
<a class="link" href="">Home</a>
<a class="link" href="/about">About</a>
</div> - Thêm một số kiểu dáng vào src / app / app.component.css tập tin.
.container {
margin: 48px 35%;
font-family: "Arial", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}.navbar {
background-color: darkslategray;
padding: 30px 50px;
display: flex;
align-items: center;
font-family: sans-serif;
}.link:first-of-type {
margin-right: 32px;
}.link {
color: white;
text-decoration: none;
font-size: 14pt;
font-weight: bold;
} - Thêm một số kiểu dáng vào lề trang tổng thể trong src / styles.css.
body {
margin: 0;
padding: 0;
} - Trong dấu nhắc lệnh hoặc thiết bị đầu cuối, hãy điều hướng đến thư mục gốc của ứng dụng Angular. Chạy ứng dụng bằng cách sử dụng ng phục vụ và đợi nó hoàn tất quá trình biên dịch.
ng serve - Trong trình duyệt, hãy nhập localhost URL vào thanh URL để xem ứng dụng của bạn. Theo mặc định, đây thường là http: // localhost: 4200 /.
- Trang web của bạn sẽ tải lên Trang chủ.
- Bạn có thể điều hướng đến trang Giới thiệu bằng cách nhấp vào liên kết Giới thiệu trong thanh điều hướng.
Cách điều hướng đến trang mới trong tệp TypeScript
Cho đến nay, bản trình diễn này sử dụng các liên kết HTML tiêu chuẩn để cung cấp điều hướng. Để điều hướng bằng tệp TypeScript thay vì tệp HTML, bạn có thể sử dụng router.navigate ().
- bên trong src / app / app.component.html , loại bỏ các thẻ liên kết và thay thế chúng bằng các thẻ nút. Các nút này sẽ có một sự kiện nhấp chuột kích hoạt một chức năng được gọi là clickButton (). Khi bạn gọi hàm clickButton (), hãy thêm đường dẫn định tuyến URL làm đối số.
<button class="link" (click)="clickButton('')">Home</button>
<button class="link" (click)="clickButton('/about')">About</button> - Thêm một số kiểu dáng cho các nút trong src / app / app.component.css tập tin.
button {
background-color: black;
padding: 4px 8px;
cursor: pointer;
} - Ở trên cùng của src / app / app.component.ts tập tin, nhập bộ định tuyến.
import { Router } from '@angular/router'; - Thêm một hàm tạo mới bên trong lớp AppComponent và đưa bộ định tuyến vào trong các tham số.
constructor(private router: Router) {
} - Bên dưới hàm tạo, hãy tạo một hàm mới có tên clickButton (), hàm này sẽ điều hướng đến trang mới dựa trên URL mà bạn chuyển vào.
clickButton(path: string) {
this.router.navigate([path]);
}
- Chạy lại lệnh ng phục vụ trong dấu nhắc lệnh hoặc thiết bị đầu cuối.
ng serve - Điều hướng đến trang web của bạn trong trình duyệt. Href bây giờ được thay thế bằng hai nút.
- Bấm vào Về cái nút. Nó sẽ chuyển đến trang Giới thiệu.
Tạo nhiều trang trong một ứng dụng Angular
Bạn có thể định tuyến giữa nhiều trang trong một ứng dụng Angular bằng cách sử dụng định tuyến. Nếu bạn có các thành phần riêng biệt cho mỗi trang, bạn có thể định cấu hình đường dẫn cho các tuyến đường của mình trong mô-đun định tuyến.
Để điều hướng đến một trang khác qua tệp HTML, hãy sử dụng thẻ liên kết có thuộc tính href làm đường dẫn định tuyến đến trang đó. Để điều hướng đến một trang khác thông qua tệp TypeScript, bạn có thể sử dụng phương thức router.navigate ().
Nếu bạn đang xây dựng một ứng dụng Angular, bạn có thể sử dụng các chỉ thị Angular. Những điều này cho phép bạn sử dụng câu lệnh if động, vòng lặp for hoặc các phép toán logic khác trong tệp HTML của một thành phần.