Các thành phần con trong Angular

Như đã đề cập ở phần đầu của giáo trình, trong Angular, toàn bộ dự án được chia thành các thành phần (components). Trong các bài học trước, chúng ta chỉ làm việc với thành phần chính được tạo ra mặc định. Bây giờ hãy học cách tạo các thành phần con.

Mã của các thành phần mới được Angular tự động tạo ra bằng một lệnh đặc biệt trong terminal: generate component. Sau từ component, cần viết tên của thành phần mới của chúng ta. Giả sử chúng ta muốn tạo thành phần user:

ng generate component user

Sau khi thực thi lệnh, chúng ta sẽ thấy rằng một thư mục mới app/user đã xuất hiện. Trong đó sẽ chứa tất cả các tệp tiêu chuẩn của thành phần.

Trong tệp thành phần user.component.ts, decorator của thành phần sẽ được tự động tạo:

@Component({
	selector: 'app-user',
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Đồng thời, trong tệp này, lớp của thành phần cũng sẽ được tự động tạo:

export class UserComponent {

}

Bây giờ chúng ta cần kết nối thành phần con với thành phần cha. Giả sử thành phần cha là thành phần app, có sẵn khi cài đặt framework. Hãy nhập thành phần của chúng ta vào đó:

import { UserComponent } from './user/user.component';

Trong decorator của thành phần, trong khóa imports, chỉ định thành phần chúng ta vừa nhập:

@Component({
	selector: 'app-root',
	imports: [UserComponent], // ở đây
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Bây giờ chúng ta có thể hiển thị nội dung của thành phần con trong thành phần cha. Để làm điều này, trong tệp template của thành phần cha, cần viết một thẻ đặc biệt, có tên được đặt trong thuộc tính selector của decorator @Component thành phần con. Trong trường hợp của chúng ta, đó là thẻ app-user. Hãy viết nó trong template của thành phần cha:

some text
<app-user></app-user>

Tạo thành phần ProductComponent. Kết nối thành phần này với thành phần chính của dự án của bạn.

Thay đổi template của thành phần con. Đảm bảo rằng các thay đổi được áp dụng trong trình duyệt.

Thay đổi CSS styles của thành phần con. Đảm bảo rằng chúng được áp dụng trong trình duyệt.

Trong thành phần con, tạo các thuộc tính name và price. Hiển thị giá trị của chúng trong template của thành phần con.