Cách thêm html vào thành phần góc
|
Storybook cung cấp rất nhiều công cụ để ghi lại tất cả các thành phần JavaScript của bạn một cách trực quan. Bắt đầu với Storybook và Angular cũng khá dễ dàng. Nhưng một số tính năng bị ẩn hoặc không được mô tả đủ để biết chúng Show
Vì vậy, trong nhóm của chúng tôi, chúng tôi đã viết một thành phần biểu mẫu Góc với Vật liệu Góc. Một số phần tử không có kiểu dáng phù hợp vì chúng không có ngữ cảnh ứng dụng của chúng tôi. Chúng tôi cần một yếu tố bao bọc  Storybook Góc trang tríStorybook Decorators là câu trả lời cho việc tạo thêm một chút đánh dấu để thêm ngữ cảnh vào các thành phần của bạn Nhóm Storybook đã làm cho việc thêm trang trí trở nên cực kỳ đơn giản Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Trong trường hợp của chúng tôi, chúng tôi chỉ cần một ng g c shared/components/dropdown-menu3 với lớp ng g c shared/components/dropdown-menu4 để có được họ phông chữ của biểu mẫu chính xác Với những bộ trang trí này, bạn có thể thêm ngữ cảnh hoặc kiểu dáng bổ sung xung quanh các thành phần của mình Thanks*Tôi hy vọng bạn đã học được điều gì đó mới hoặc được truyền cảm hứng để tạo ra điều gì đó mới sau khi đọc câu chuyện này. 🤗 Nếu vậy, hãy cân nhắc đăng ký qua email (cuộn lên đầu trang này) hoặc theo dõi tôi tại đây trên Hashnode. *
Nếu tôi để lại cho bạn câu hỏi hoặc điều gì đó để trả lời, hãy cuộn xuống và nhập tin nhắn cho tôi. Vui lòng gửi cho tôi một DM trên Twitter @DevByRayRay khi bạn muốn giữ nó ở chế độ riêng tư. DM của tôi luôn mở 😁 Nhiều ngôn ngữ lập trình hiện đại, chẳng hạn như Java và Python, là Hướng đối tượng (OO). Những người khác là hướng sự kiện. Mặt khác, Angular là một Framework, tuân theo mô hình của chính nó, sử dụng kiến trúc dựa trên Thành phần. Bằng cách đó, chúng tôi muốn nói rằng một ứng dụng Angular bao gồm nhiều khối có thể tái sử dụng được gọi là Thành phần. Mỗi cái được tạo thành từ một số tệp, bao gồm một. tệp lớp ts,. mẫu html và có lẽ là một. css và thông số kỹ thuật. tập tin thử nghiệm ts. Ý tưởng đằng sau kiến trúc dựa trên Thành phần của Angular là một ý tưởng hợp lý; Trong nhiều trường hợp, chúng ta có thể lập kế hoạch những phần nào sẽ tạo thành các thành phần. Những lần khác, chúng tôi nhận ra rằng chúng tôi sẽ cần chức năng tương tự ở một vài nơi trong ứng dụng của mình. Và đó là chủ đề của hướng dẫn. cách trích xuất TypeScript, HTML và CSS mà chúng ta cần sao chép và cách phân chia tất cả chúng thành một thành phần mới. Do các quy tắc phạm vi do Angular áp đặt, những gì nên bỏ vào và những gì cần loại bỏ có thể là một câu hỏi khó trả lời. Như một trường hợp nghiên cứu, chúng tôi sẽ sử dụng menu thả xuống tùy chỉnh mà chúng tôi đã triển khai trong bài viết Toggling Element Visibility trong Angular 11 với NgClass và biến nó thành một thành phần để chúng tôi có thể sử dụng lại sau này Hoán đổi Menu thả xuống hiện tại bằng Thành phần mới của chúng tôiTốt nhất là tránh làm mọi thứ cùng một lúc; . Thay vào đó, hãy giải quyết nhiệm vụ bằng cách sử dụng các bước nhỏ bằng cách tạo thành phần mới của bạn và thay thế (các) thành phần hiện có bằng thành phần đó Sử dụng CLI góc, lệnh sẽ là ng g c shared/components/dropdown-menu “C g” là viết tắt của “Tạo thành phần”, vì vậy, miễn là bạn biết mình đang gõ gì, bạn có thể sử dụng dạng viết tắt. Lệnh trên sẽ đặt thành phần menu thả xuống mới của chúng ta trong “src\app\shared\components\dropdown-menu\”
Với thành phần của chúng tôi tại chỗ, chúng tôi đã sẵn sàng để chèn nó vào mẫu của chúng tôi. Để làm điều đó, chúng tôi chỉ cần nhận xét đánh dấu được đề cập và thêm vào thành phần menu thả xuống
Để tạo kiểu cho thành phần mới của chúng ta giống như (các) thành phần mà chúng ta đang thay thế, chúng ta có thể sao chép qua lớp “menu thả xuống”. Theo mặc định, dropdown-menu hiển thị là “none”, vì vậy chúng ta cũng nên chuyển qua ngClass. Điều đó sẽ thay đổi thuộc tính hiển thị thành "flex" trong sự kiện di chuột của DIV vùng chứa menu
Giao tiếp với thành phần mới của chúng tôiThách thức lớn nhất khi giới thiệu một thành phần mới vào mẫu là việc truyền dữ liệu giữa thành phần cha và con. Trong trường hợp của chúng tôi, dữ liệu cần di chuyển hai chiều. menu thả xuống cần biết mục nào sẽ hiển thị và phụ huynh cần được thông báo về lựa chọn của người dùng Hãy bắt đầu bằng cách thiết lập các mục menu thả xuống Trong Angular, cách truyền dữ liệu trực tiếp đến một thành phần là sử dụng trình trang trí @Input(). Bằng cách thêm 1 vào thẻ menu thả xuống, biến Đầu vào menuItems của thành phần của chúng tôi sẽ được đặt thành InvestmentClasses của AppComponent Trong DropdownMenuComponent, bây giờ chúng ta cần thêm biến menuItems export class DropdownMenuComponent {
@Input() public menuItems: ArrayChúng tôi muốn menuItems có định dạng rất cụ thể để các thuộc tính không bị thiếu trong mẫu. Để làm được điều đó, chúng ta có thể định nghĩa giao diện MenuItem export interface MenuItem {
icon: string;
id: string;
value: string,
}
Giao diện MenuItem được xuất từ DropdownMenuComponent để AppComponent có thể sử dụng giao diện này (mặc dù điều này không thực sự cần thiết, miễn là các thuộc tính của phần tử phù hợp) import { MenuItem } from "./shared/components/dropdown-menu/dropdown-menu.component";
export class AppComponent {
public menuOpened = false;
public investmentClasses: MenuItem[] = [
{
icon: "euro_symbol",
value: "currencies",
id: "currency"
},
//...
];
}
Thông báo cho phụ huynh về lựa chọn của người dùngGiống như trình trang trí @Input() chấp nhận dữ liệu từ thành phần cha, @Output() tương tự phát dữ liệu cho cha. Vì lý do đó, nó phải được khởi tạo thành một phiên bản EventEmitter mới export class DropdownMenuComponent {
@Input() public menuItems: ArrayNhững gì bạn chọn phát ra cho phụ huynh tùy thuộc vào định dạng dữ liệu. Vì chúng ta đang sử dụng Mảng, nên cách dễ nhất để truy cập một phần tử là thông qua chỉ mục số của nó. Một cách dễ dàng để làm điều đó là thêm nó vào vòng lặp ngFor. Điều đó cho phép chúng tôi chuyển nó tới trình xử lý sự kiện onClick ________số 8Bây giờ chúng ta có thể phát chỉ mục cho cha mẹ public onClick(event: MouseEvent, index: number) {
event.stopPropagation();
this.itemSelected.emit(index);
}
Trong khi đó ở template của cha, chúng ta có thể thêm một handler cho itemSelected như sau ng g c shared/components/dropdown-menu0 Đây là mã cho phương thức onItemSelected() cho biết cách truy xuất phần tử InvestmentClasses có liên quan ng g c shared/components/dropdown-menu1 Tạo kiểu cho menu thả xuốngĐể duy trì đóng gói thành phần thích hợp, bất kỳ lớp nào được xác định trong mẫu của menu thả xuống phải được chuyển vào lớp của nó. tập tin css 0 Bản trình diễnTrên mã và hộp. io, bạn sẽ tìm thấy bản trình diễn với tất cả mã được trình bày trong bài viết này Phần kết luậnBất cứ lúc nào bạn cần sử dụng lại các phần tử HTML trong các trang khác nhau hoặc thậm chí trong cùng một trang, đó là lúc để đóng gói chức năng của nó trong một thành phần tùy chỉnh. Như chúng ta đã thấy ở đây hôm nay, nó không khó lắm; Làm cách nào để thêm phần tử HTML vào Angular?Sử dụng JavaScript, tôi sẽ làm một cái gì đó như thế này. var d1 = tài liệu. getElementsByClassName('one'); . insertAdjacentHTML('beforeend', '');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');');'); . Lưu chuỗi của bạn vào một biến trong. tập tin ts. . Trong tệp html, hãy sử dụng *ngFor Làm cách nào để hiển thị nội dung HTML trong Angular?Nếu giá trị HTML chứa thẻ Nếu bạn cố gắng hiển thị thẻ .
Làm cách nào để liên kết HTML trong Angular?Chỉ thị ng-bind-html là một cách an toàn để liên kết nội dung với phần tử HTML. Khi bạn cho phép AngularJS viết HTML trong ứng dụng của mình, bạn nên kiểm tra HTML để tìm mã nguy hiểm. Bằng cách bao gồm "khử trùng góc.
Làm cách nào để đưa HTML vào Angular?Việc đưa HTML vào một thành phần bằng cách sử dụng Angular có thể được thực hiện bằng cách sử dụng thuộc tính “innerHTML” của vùng chứa (thường là “div” hoặc “p”). However, there are two issues with this approach: If the component defines some CSS styles (and uses the default view encapsulation), they won't be applied to the inserted HTML. |
