Cách tạo và sử dụng các thành phần của riêng bạn trong Angular
Một thành phần là một trong những khối xây dựng quan trọng nhất của một ứng dụng Angular. Các thành phần là các đoạn mã có thể sử dụng lại tạo nên các phần nhất định trên trang web của bạn.
Ví dụ về các thành phần bạn có thể tạo bao gồm các phần tử giao diện người dùng nhỏ hơn như nút hoặc thẻ. Chúng cũng có thể bao gồm các phần tử giao diện người dùng lớn hơn như thanh bên, thanh điều hướng hoặc toàn bộ trang.
Mục Lục
Sử dụng các thành phần trong Angular
Khi bạn tạo các thành phần trong một ứng dụng Angular, bạn có thể sử dụng chúng trong các thành phần khác. Ví dụ: bạn có thể tạo một thành phần cho phần tử thẻ giao diện người dùng lớn. Sau đó, bạn có thể sử dụng thành phần này như một thẻ HTML thông thường, ở bất kỳ đâu bạn muốn:
<app-new-component></app-new-component>Vì các thành phần là các bit mã có thể sử dụng lại, bạn cũng có thể chuyển các biến để dữ liệu cho mỗi trường hợp là khác nhau. Bạn cũng có thể tạo các thành phần cho các trang và bạn có thể định tuyến chúng cho phù hợp bằng cách sử dụng app-routing.module.ts tập tin.
Bạn có thể thiết kế các thành phần của mình dựa trên cấu trúc của ứng dụng và mức độ bạn muốn tách biệt chức năng của mình.
Cách tạo một thành phần
Bạn có thể dùng ng tạo lệnh để tạo một thành phần mới.
- Tạo một ứng dụng Angular mới bằng cách sử dụng ng mới hoặc mở một cái hiện có.
- Mở dấu nhắc lệnh hoặc thiết bị đầu cuối. Ngoài ra, nếu bạn mở ứng dụng Angular trong IDE chẳng hạn như Visual Studio Code, bạn có thể sử dụng thiết bị đầu cuối tích hợp sẵn.
- Trong terminal, điều hướng đến vị trí của thư mục gốc của dự án. Ví dụ:
cd C:UsersSharlDesktopAngular-Application - Chạy ng tạo thành phần theo sau là tên của thành phần mới:
ng generate component ui-card - Thành phần mới sẽ được tạo trong một thư mục mới, bên trong src / app danh mục.
Cách thêm nội dung vào thành phần Angular
Angular tạo mỗi thành phần với một tệp HTML, CSS, TypeScript và Kiểm tra Đặc điểm kỹ thuật.
- Các Tệp HTML lưu trữ nội dung HTML của thành phần.
- Các Tệp CSS lưu trữ kiểu dáng của thành phần.
- Các Tệp thông số kỹ thuật kiểm tra (spec.ts) lưu trữ bất kỳ bài kiểm tra đơn vị nào cho thành phần.
- Các Tệp TypeScript lưu trữ logic và chức năng xác định thành phần.
Thêm một số nội dung vào thành phần ui-card tùy chỉnh.
- Mở src / app / ui-card / ui-card.component.htmlvà cập nhật HTML của thành phần. Đảm bảo rằng bạn có một hình ảnh sử dụng cùng tên trong một thư mục có tên src / tài sản / hình ảnh trong ứng dụng Angular của bạn. Thay thế nội dung của ui-card.component.html với những điều sau đây:
<div class="card">
<img src="./assets/images/blue-mountains.jpg" alt="Avatar">
<div class="container">
<h4 class="title"> Blue Mountains </h4>
<p> NSW, Australia </p>
</div>
</div> - Mở ui-card.component.cssvà thêm nội dung CSS vào thành phần:
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width: 400px;
padding: 8px;
margin: 24px;
background-color: whitesmoke;
font-family: sans-serif;
}.card img {
max-width: 400px;
}.title {
padding-top: 16px;
}.container {
padding: 2px 16px;
} - Các ui-card.component.ts tệp đã chứa một lớp cho thành phần mới nơi bạn có thể thêm các chức năng, logic và chức năng mới. Nó sẽ giống như thế này:
export class UiCardComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
Cách sử dụng thành phần trong HTML của một thành phần khác
Nội bộ ui-card.component.ts, có ba thuộc tính: selector, templateUrl và styleUrl. TemplateUrl đề cập đến HTML của thành phần (và do đó liên kết đến tệp HTML). Thuộc tính styleUrls đề cập đến CSS của thành phần và liên kết đến tệp CSS.
@Component({
selector: 'app-ui-card',
templateUrl: './ui-card.component.html',
styleUrls: ['./ui-card.component.css']
})Khi bạn sử dụng thành phần Thẻ giao diện người dùng trong một thành phần khác, bạn sẽ sử dụng tên bộ chọn “app-ui-card”.
- Đầu tiên, thêm một số nội dung vào trang web của bạn. Mở src / app / app.component.html và thêm một thanh điều hướng:
<div class="navbar-header">
<a class="nav-title"><b> Web Navbar </b></a>
</div> - Thêm một số kiểu vào thanh điều hướng của bạn trong src / app / app.component.css:
.navbar-header {
background-color: #07393C;
padding: 30px 50px;
display: flex;
align-items: center;
font-family: sans-serif;
}.nav-title {
text-decoration: none;
color: white;
font-size: 16pt;
} - Bên dưới thanh điều hướng trong app.component.html, thêm một thẻ giao diện người dùng mới. Sử dụng tên bộ chọn “app-ui-card” làm thẻ HTML:
<app-ui-card> </app-ui-card> - Bạn cũng có thể sử dụng lại thành phần bằng cách bao gồm thẻ nhiều lần. Để làm như vậy, hãy thay thế dòng trên để sử dụng nhiều thẻ HTML app-ui-card thay thế:
<div style="display: flex">
<app-ui-card> </app-ui-card>
<app-ui-card> </app-ui-card>
<app-ui-card> </app-ui-card>
</div> - Chạy ứng dụng Angular của bạn từ thiết bị đầu cuối bằng cách sử dụng ng phục vụ và mở trang web của bạn trong trình duyệt web.
Cách chuyển các tham số đầu vào vào thành phần
Vì thành phần có thể sử dụng lại, nên có những thuộc tính mà bạn có thể muốn thay đổi mỗi khi sử dụng. Trong trường hợp này, bạn có thể sử dụng các tham số đầu vào.
- cộng Đầu vào vào danh sách hàng nhập khẩu ở đầu ui-card.component.ts:
import { Component, Input, OnInit } from '@angular/core'; - Sau đó, thêm hai biến đầu vào bên trong UICardComponent lớp. Những điều này sẽ cho phép bạn thay đổi tên vị trí và hình ảnh hiển thị trên thẻ. Điền vào ngOnInit chức năng như được hiển thị, để tạo đường dẫn đến hình ảnh hoặc sử dụng giá trị mặc định:
export class UiCardComponent implements OnInit {
@Input() locationName: string;
@Input() imageName: string;constructor() { }
ngOnInit(): void {
if (this.imageName) {
this.imageName = "./assets/images/" + this.imageName;
} else {
this.imageName = "./assets/images/blue-mountains.jpg";
}
}
} - Trong ui-card.component.html, thay đổi giá trị “Blue Mountains” của Tiêu đề 4 được mã hóa cứng để sử dụng biến đầu vào “locationName”. Cũng thay đổi mã cứng src trong thẻ hình ảnh để sử dụng biến đầu vào “imageName”:
<div class="card">
<img src="{{imageName}}" alt="Avatar">
<div class="container">
<h4 class="title">{{locationName ? locationName : 'Blue Mountains'}}</h4>
<p>NSW, Australia</p>
</div>
</div> - Trong app.component.html, sửa đổi các thẻ “app-ui-card” để bao gồm các đầu vào “locationName” và “imageName”. Đối với mỗi phần tử thẻ giao diện người dùng, hãy nhập một giá trị khác nhau. Đảm bảo rằng các tệp hình ảnh tồn tại trong thư mục nội dung / hình ảnh của ứng dụng Angular của bạn.
<div style="display: flex">
<app-ui-card [locationName]="'Blue Mountains'" [imageName]="'blue-mountains.jpg'"> </app-ui-card>
<app-ui-card [locationName]="'Sydney'" [imageName]="'sydney.jpg'"> </app-ui-card>
<app-ui-card [locationName]="'Newcastle'" [imageName]="'newcastle.jpg'"> </app-ui-card>
</div> - Chạy ứng dụng Angular của bạn từ thiết bị đầu cuối bằng cách sử dụng ng phục vụ và mở trang web của bạn trong trình duyệt web.
Bạn có thể thấy lỗi tại thời điểm này về các thuộc tính này không có bộ khởi tạo. Nếu vậy, chỉ cần thêm hoặc đặt “precisionPropertyInitialization”: false trong của bạn tsconfig.json.
Cách chuyển đến một thành phần mới
Nếu thành phần của bạn đại diện cho một phần lớn của trang web, chẳng hạn như một trang mới, thì bạn cũng có thể định tuyến đến thành phần đó.
- Mở app-routing.module.ts. Nhập Thành phần thẻ giao diện người dùng ở đầu tệp:
import { UiCardComponent } from './ui-card/ui-card.component'; - Thêm một đường dẫn định tuyến vào mảng các tuyến đường:
const routes: Routes = [
{ path: 'uicard', component: UiCardComponent },
] - Thay thế tất cả nội dung hiện tại trong app.component.html để chỉ bao gồm thanh điều hướng và thẻ HTML đầu ra bộ định tuyến. Bộ định tuyến-ổ cắm cho phép bạn định tuyến giữa các trang. Thêm siêu liên kết vào thanh điều hướng, với thuộc tính href phù hợp với đường dẫn trong mảng tuyến đường:
<div class="navbar-header">
<a class="nav-title"><b> Web Navbar </b></a>
<a class="nav-a-link" href="/uicard"><b> UI Card </b></a>
</div>
<router-outlet></router-outlet> - Thêm một số kiểu vào liên kết thẻ giao diện người dùng mới, trong app.component.css:
.nav-a-link {
text-decoration: none;
color: #4b6569;
font-size: 14pt;
margin-left: 60px;
font-weight: lighter;
} - Chạy ứng dụng Angular của bạn từ thiết bị đầu cuối bằng cách sử dụng ng phục vụ và mở trang web của bạn trong trình duyệt web. Liên kết sẽ xuất hiện trong thanh điều hướng trên trang web.
- Ghi lại địa chỉ URL trong trình duyệt web của bạn. Theo mặc định, nó thường là http: // localhost: 4200 /. Khi bạn nhấp vào liên kết thẻ giao diện người dùng, trang sẽ chuyển đến http: // localhost: 4200 / uicardvà thẻ giao diện người dùng sẽ xuất hiện.
Tạo các thành phần trong Angular
Một thành phần là một trong những khối xây dựng chính của Angular. Các thành phần cho phép bạn chia các phần khác nhau của trang web thành các phần nhỏ hơn, có thể tái sử dụng. Bạn có thể tạo bất kỳ thứ gì thành các thành phần, bao gồm các nút nhỏ hơn, thẻ, thanh bên lớn hơn và thanh điều hướng.
Bạn cũng có thể sử dụng các biến đầu vào để chuyển dữ liệu qua các phiên bản khác nhau của thành phần. Và bạn có thể định tuyến đến thành phần bằng cách sử dụng các đường dẫn URL.
Nếu bạn đang phát triển một ứng dụng Angular mới, bạn có thể cần phải xây dựng một thanh điều hướng để người dùng điều hướng qua các thành phần của bạn. Có một thanh điều hướng đáp ứng cho phép bạn xem nó trên các thiết bị khác nhau, trên các kích thước màn hình khác nhau.