Cách lấy dữ liệu từ HTML sang tệp ts trong góc
Khi chúng tôi xây dựng các thành phần trong một ứng dụng, chúng tôi có thể cần chia sẻ hoặc gửi dữ liệu từ cha mẹ sang con hoặc không có kết nối trực tiếp Show
Angular cung cấp những cách khác nhau để giao tiếp các thành phần
Chúng tôi sử dụng các cách này để chia sẻ dữ liệu giữa hai thành phần, hiển thị danh sách sản phẩm và lấy tên sản phẩm đã chọn trong thành phần khác khi người dùng nhấp vào nó
Sử dụng trang trí đầu vào và đầu raCác bộ trang trí đầu vào cho phép chúng tôi nhanh chóng lấy dữ liệu từ các thành phần chính, chỉnh sửa 9 bằng cách sử dụng bộ trang trí 0 và khai báo thuộc tính productList
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Cập nhật HTML để hiển thị danh sách sản phẩm bằng cách sử dụng chỉ thị 1
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Thứ hai, ứng dụng. thành phần. ts khai báo biến sản phẩm với danh sách sản phẩm sẽ được hiển thị
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình chỉnh sửa ứng dụng. thành phần. html và sử dụng 2 để chuyển dữ liệu đến thành phần list-product
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Tốt, chúng tôi đang sử dụng trình trang trí Input () và gửi dữ liệu từ cha mẹ sang con, bước tiếp theo là lấy sản phẩm đã chọn từ thành phần con và đọc nó từ cha mẹ Lấy sản phẩm đã chọn từ thành phần conSử dụng kết hợp ________ 13 decorators và EventEmitter, chúng tôi có thể chia sẻ thông tin với phụ huynh Chỉnh sửa danh sách sản phẩm. thành phần và khai báo thuộc tính 4 bằng cách sử dụng loại trang trí 5 và EventEmitterTạo một phương thức mới cho phương thức 6 và nó nhận được một sản phẩm bằng cách sử dụng trình phát sự kiện 4 để phát ra giá trị đã chọn
3Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Chỉnh sửa danh sách sản phẩm. thành phần. html, lắng nghe sự kiện nhấp chuột, trên đó gọi phương thức onSelectedProduct 4Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Tiếp theo, chỉnh sửa 8 và tạo một phương thức mới để xử lý sự kiện 4 và gán nó cho thuộc tính nội bộ 0 8Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Chỉnh sửa 1 và đăng ký để nghe sự kiện 2 và chỉ định 6 vượt qua 4Chúng tôi hiển thị sản phẩm đã chọn bằng cách sử dụng 5 cho thuộc tính Sản phẩm đã chọn 4Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Nhận quyền truy cập bằng ViewChildĐôi khi chúng ta muốn truy cập các thuộc tính và chức năng từ thành phần con. Trình trang trí ViewChild cho phép chúng tôi đưa một thành phần vào một thành phần khác và truy cập nó
Đầu tiên, tạo một thuộc tính mới vào de 6 sessionId và đặt giá trị là Math. ngẫu nhiên() 6Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
chỉnh sửa ứng dụng. thành phần. ts, khai báo một thuộc tính mới 7, sử dụng trình trang trí 8, chuyển 9 0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Tiếp theo, triển khai vòng đời AfterViewInit và gán 7 từ 9 cho ứng dụng. phiên thành phầnId 0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Vào ứng dụng. thành phần. html hiển thị sessionId 1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Xong. chúng tôi có quyền truy cập vào các thuộc tính và thuộc tính của thành phần ProductList Sử dụng dịch vụ với Chủ đề hành viCác giải pháp trước đây hoạt động tốt. Chúng tôi có thể cung cấp mã của mình nhưng hơi thiếu liên kết trực tiếp giữa 32. Điều gì xảy ra nếu chúng ta có nhiều hơn ba thành phần sâu?Một giải pháp tốt khác là sử dụng dịch vụ chia sẻ dữ liệu giữa các thành phần để đồng bộ hóa dữ liệu thực tế. Rxjs với 33 mang lại cho chúng tôi khả năng giao tiếp với các thành phần có thêm điểm
Đầu tiên, tạo một dịch vụ 34 với thuộc tính là chủ thể hành vi trường 35 để giữ giá trị của sản phẩm và khai báo một biến 0 là có thể quan sát được từ chủ thể hành vi sản phẩmTiếp theo, tạo một phương thức mới, 37, để đặt sản phẩm đã chọn và cập nhật hành vi 2Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Tiếp theo, thành phần đưa dịch vụ sản phẩm vào ứng dụng, đăng ký 0 có thể quan sát được và giá trị từ thành phần đó gán cho trường 0 3Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Chỉnh sửa thành phần danh sách sản phẩm, thêm dịch vụ sản phẩm, chỉnh sửa phương thức onSelected và gọi phương thức 37 từ dịch vụ sản phẩm 4Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Hoàn thiện các thành phần của chúng tôi có giao tiếp mà không có phụ thuộc Tái cấu trúc danh sách sản phẩmChúng tôi có thể cấu trúc lại mã của mình để giao tiếp các dịch vụ với nhiều bước hơn
Chỉnh sửa sản phẩm-dịch vụ với hai trường mới cho Danh sách sản phẩm và một phương thức mới để gửi danh sách sản phẩm 5Vào chế độ toàn màn hình Thoát chế độ toàn màn hình ứng dụng. thành phầnĐưa dịch vụ sản phẩm vào hàm tạo, trên vòng đời ngOnInit, đăng ký phương thức 41 từ dịch vụ 6Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Chúng tôi có thể xóa sự kiện lắng nghe (onSelected) khỏi HTML 7Vào chế độ toàn màn hình Thoát chế độ toàn màn hình thành phần danh sách sản phẩmTương tự như 8, đưa dịch vụ sản phẩm vào hàm tạo và đăng ký productList có thể quan sát được trên vòng đời của 43 gán productList với giá trị từ đăng kýCuối cùng, xóa thuộc tính Đầu vào và đầu ra khỏi danh sách sản phẩm. thành phần. ts 8Vào chế độ toàn màn hình Thoát chế độ toàn màn hình Xong các thành phần của chúng ta có một giao tiếp rõ ràng mà không cần sử dụng Đầu vào và Đầu ra. ) Phần kết luậnTrong bài viết này, chúng tôi đã giới thiệu ba cách để giao tiếp các thành phần với góc. Một thành phần liên quan đến một cấp độ, chẳng hạn như cha mẹ đối với con cái bằng cách sử dụng các bộ trang trí đầu vào và đầu ra, hoạt động tốt Vui lòng chia sẻ dữ liệu với dịch vụ chủ đề hành vi trong các tình huống khác mà thành phần của bạn dự kiến sẽ sử dụng ở một số nơi Làm cách nào để liên kết dữ liệu từ tệp HTML sang tệp TS trong Angular?ứng dụng. thành phần. ts . nhập {Thành phần} từ '@angular/core'; @Thành phần({ bộ chọn. 'gốc ứng dụng', mẫuUrl. '. /ứng dụng. thành phần. html', phong cáchUrl. ['. /ứng dụng. thành phần. css'] xuất lớp AppComponent { title = 'Liên kết dữ liệu bằng phép nội suy chuỗi'; Làm cách nào để lấy dữ liệu từ tệp HTML sang tệp TS trong Angular 7?ts và tìm nạp dữ liệu từ đó vào mẫu HTML (thành phần. tệp html). . nhập {Thành phần} từ '@angular/core'; @Thành phần( {bộ chọn. 'máy chủ ứng dụng', mẫuUrl. 'người phục vụ. thành phần. html'}) xuất lớp ServerComponent { ID máy chủ. số = 10; tình trạng máy chủ. chuỗi = 'Trực tuyến'; Làm cách nào để đưa HTML vào tệp TS?Cách tạo phần tử HTML trong TypeScript. . sử dụng tài liệu. phương thức createElement() để tạo phần tử Đặt bất kỳ thuộc tính hoặc html bên trong nào trên phần tử đã tạo Thêm phần tử vào trang bằng phương thức appendChild() Làm cách nào để lấy giá trị từ HTML sang thành phần trong Angular?Trình trang trí tham số @Attribute()
. |