Cách thêm mã html vào tệp ts trong Angular 6
|
Đây là cách, trong Angular, bạn có thể sử dụng các lệnh để tự động sửa đổi HTML trong Chế độ xem mà không làm ô nhiễm logic kinh doanh của bạn Show
Tôi biết rằng, trong cột cuối cùng của mình, tôi đã nói rằng số lượng tài liệu liên quan đến TypeScript có sẵn để tạo các ứng dụng Angular lớn đến mức mọi đóng góp của tôi có thể trở nên dư thừa… nhưng sau đó tôi nhận ra rằng tôi không thể ngăn mình thảo luận Một trong những lý do mà tôi rất thích Angular là nó thực hiện rất tốt việc tách các thành phần khác nhau của một ứng dụng. Ví dụ: các chỉ thị thuộc tính cho phép bạn tách biệt việc tạo giao diện người dùng của mình khỏi mã cần thiết để triển khai logic trình bày của bạn Trường hợp chỉ thị Nhưng nếu tôi cần sửa đổi giao diện hoặc hành vi của các phần tử HTML -- và đặc biệt, nếu tôi muốn có thể sử dụng chức năng này ở nhiều nơi -- tôi muốn tạo một chỉ thị thuộc tính. Trên hết, nếu tôi muốn có thể tùy chỉnh chức năng đó khi tôi sử dụng nó… thì, tôi sẽ bị thúc đẩy sử dụng một chỉ thị thuộc tính Định nghĩa một Chỉ thị Điều quan trọng ở đây là tránh xung đột với bất kỳ tên nào khác có thể được sử dụng trong phần tử HTML. Đối với nghiên cứu điển hình này, tôi đang tạo một lệnh hiển thị thông tin tóm tắt về một tập hợp các đối tượng khách hàng (một lệnh tốt hơn nữa sẽ hiển thị thông tin tóm tắt về bất kỳ tập hợp nào). Tôi đã quyết định chọn phvisDisplayCustomers làm tên thuộc tính của mình. Kết hợp tên công ty của tôi (phvis) vào tên để tránh xung đột với các tên HTML hoặc Angular trong tương lai (hoặc các lệnh do các nhà phát triển khác tạo ra). Ví dụ này, được thêm vào mẫu của thành phần, sử dụng chỉ thị của tôi với phần tử span Để bắt đầu tạo chỉ thị của mình, tôi thêm một tệp mã TypeScript mới vào dự án của mình và bao gồm một lớp để giữ mã của chỉ thị của tôi (tôi khéo léo gọi tệp này là DisplayCustomers. chỉ thị. ts). Để đánh dấu lớp này là một chỉ thị thuộc tính, tôi trang trí lớp bằng một bộ chọn bao gồm tên thuộc tính của tôi. Tôi cũng cần một câu lệnh nhập cho các tài nguyên Góc mà chỉ thị của tôi phụ thuộc vào. Đối với một lệnh đơn giản, tất cả những gì tôi cần là mô-đun Chỉ thị Khung kết quả cho chỉ thị của tôi trông như thế này import { Directive } from '@angular/core';
@Directive({ selector: '[phvisDisplayCustomers]' })
export class DisplayCustomersDirective {
constructor() {
}
}Hai lưu ý về đặt tên. Tên lớp cho chỉ thị của bạn không nhất thiết phải kết thúc bằng từ "Chỉ thị" nhưng đó là một cách thực hành của Angular. Trong Visual Studio 2015, tôi có một đường lượn sóng màu đỏ bên dưới @angular/core trong câu lệnh nhập khi tôi sử dụng "chỉ thị" trong tên tệp. Điều đó sẽ biến mất và quay trở lại, nhưng nó không bao giờ dừng biên dịch, hiển thị trong danh sách Lỗi hoặc cản trở ứng dụng của tôi. Tôi quyết định sống chung với nó thay vì đổi tên tệp Tuy nhiên, trước khi tôi có thể sử dụng chỉ thị của mình trong một trang, tôi cần thông báo cho ứng dụng của mình rằng chỉ thị của tôi tồn tại. Điều đó yêu cầu hai bổ sung cho ứng dụng của ứng dụng của tôi. mô-đun. tập tin ts. Tôi cần một câu lệnh nhập tham chiếu đến tên lớp và tên tệp của tôi; . Việc tích hợp các phần bổ sung đó với các thành phần từ cột trước của tôi sẽ cho mã trong Liệt kê 1 Liệt kê 1. Nhập khẩu và khai báo một chỉ thịimport { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { CustomerListComponent } from './CustomerList.component';
import { DisplayCustomersDirective } from './DisplayCustomers.directive';
@NgModule({
imports: [
BrowserModule,
HttpModule,
FormsModule
],
declarations: [
AppComponent,
CustomerListComponent,
DisplayCustomersDirective
],
bootstrap: [AppComponent]
})
export class AppModule { }Thay đổi phần tử Do đó, bước đầu tiên của tôi trong việc thao tác trên trang là tăng cường câu lệnh nhập ở đầu chỉ thị của tôi để chọn các gói mới mà tôi yêu cầu import { Directive, ElementRef, Renderer } from '@angular/core';Sau đó, vấn đề là thêm một số mã vào hàm tạo của tôi để chấp nhận các tham chiếu đến các mô-đun ElementRef và Renderer. Bên trong mô-đun, tôi sử dụng phương thức Renderer setElementProperty để cập nhật phần tử mà lệnh của tôi được đính kèm (với Renderer2, bạn sẽ sử dụng setElement). Tôi phải chuyển setElementProperty phần tử tôi muốn cập nhật (có sẵn thông qua thuộc tính ElementRef nativeElement), tên của thuộc tính tôi muốn cập nhật (innerHTML, trong trường hợp này) và văn bản tôi muốn thêm vào phần tử. Để đảm bảo tính năng này hoạt động, tôi sẽ chèn "Xin chào, Thế giới" truyền thống constructor(elm: ElementRef, rnd: Renderer) {
rnd.setElementProperty(elm.nativeElement, 'innerHTML', "Hello, World");
}Cấu hình hỗ trợ Để nắm bắt giá trị của thuộc tính selectionType, tôi cần thêm một thuộc tính vào lệnh của mình và trang trí nó bằng @Input (trình trang trí Đầu vào kéo dữ liệu từ phần tử vào lệnh). Tôi muốn thêm một thuộc tính bên trong chỉ thị của mình, như thế này export class DisplayCustomerDirective {
@Input() selectionType: string;Rõ ràng là tôi muốn sử dụng thuộc tính này khi tôi tạo màn hình của mình. Tuy nhiên, hóa ra các thuộc tính Đầu vào không được khởi tạo khi hàm tạo thực thi. Vì vậy, thay vì sử dụng hàm tạo để thêm HTML vào phần tử của tôi, tôi sẽ sử dụng phương thức ngOnInit của Angular cho việc đó và chỉ sử dụng hàm tạo để thực hiện hai việc. chấp nhận các mô-đun ElementRef và Renderer và thiết lập các trường để giữ các mô-đun Sau khi di chuyển mã của tôi và tích hợp thuộc tính của tôi, hàm tạo và phương thức ngOnInit của tôi trông như thế này constructor(private elm: ElementRef, private rnd: Renderer) { }
ngOnInit() {
this.rnd.setElementProperty(this.elm.nativeElement, 'innerHTML',
"Your selection is: " + this.selectionType;
}Để hỗ trợ sử dụng Input và ngOnInit, tôi cần mở rộng câu lệnh nhập lệnh của mình để bao gồm cả hai ________số 8_______Tại thời điểm này, tôi có một lệnh đơn giản bổ sung chức năng cho một phần tử mà nó được sử dụng. Tuy nhiên, tôi vẫn cần tích hợp chỉ thị này với các thành phần sử dụng nó để họ có thể chuyển danh sách khách hàng để hiển thị chẳng hạn. Tôi cũng thêm hành vi vào phần tử của mình để hiển thị thông tin tóm tắt. Tôi sẽ giải quyết những nhiệm vụ đó trong cột tiếp theo của mình Làm cách nào để thêm thẻ HTML vào tệp Angular ts?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 để thêm mã HTML vào Angular?Cách đưa tệp HTML vào AngularJS . Sử dụng “chỉ thị ng-gộp” để đưa mã vào tệp bên ngoài 'Bảng. html'. Tuyên bố đã được đánh dấu in đậm trong đoạn mã dưới đây. . Trong bộ điều khiển, một biến "hướng dẫn" được tạo như một phần của đối tượng $scope. Biến này chứa danh sách các cặp khóa-giá trị Làm cách nào để chuyển dữ liệu từ tệp HTML sang tệp TS trong Angular?Gửi dữ liệu giữa tệp HTML và TypeScript . Nhập FormsModule vào ứng dụng. mô-đun. ts và thêm nó vào mảng nhập. nhập { FormsModule } từ '@angular/forms';. Khai báo một biến lớp tên người dùng trong. . Ở dạng tên người dùng-kiểm tra. . Để kiểm tra dữ liệu đó đang được gửi đến Làm cách nào để hiển thị mã HTML trong Angular?Nếu giá trị HTML chứa thẻ Nếu bạn cố gắng hiển thị thẻ . |
