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

Angular cung cấp những cách khác nhau để giao tiếp các thành phần

• Sử dụng các bộ trang trí Input[] và Output[]
• Sử dụng trình trang trí Viewchild
• Sử dụng chủ đề hành vi với Rxjs

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ó

• *danh sách-sản phẩm. thành phần *hiển thị danh sách các sản phẩm được cung cấp từ cha mẹ đến con cái
• ứng dụng *. thành phần * hiển thị sản phẩm được chọn

Sử dụng trang trí đầu vào và đầu ra

Cá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

 
    {{ product.name }}
  

9 bằng cách sử dụng bộ trang trí

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

0 và khai báo thuộc tính productList

import { Component, Input, OnInit } from '@angular/core';

export class ProductListComponent implements OnInit {
  @Input[] productList = [];
  ngOnInit[] {}
}

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ị

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

1

 
    {{ product.name }}
  

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Học nhiều hơn về

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ị

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

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

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

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ìm hiểu thêm

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 con

Sử 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

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

4 bằng cách sử dụng loại trang trí

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

5 và EventEmitter

Tạo một phương thức mới cho phương thức

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

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

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

4 để phát ra giá trị đã chọn

Đọc thêm về trình phát sự kiện

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

3

Và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

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

4

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tiếp theo, chỉnh sửa

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

8 và tạo một phương thức mới để xử lý sự kiện

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

4 và gán nó cho thuộc tính nội bộ

0

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

8

Và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

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

6 vượt qua

4

Chú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

import { Component, Input, OnInit } from '@angular/core';

export class ProductListComponent implements OnInit {
  @Input[] productList = [];
  ngOnInit[] {}
}

4

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tìm hiểu thêm danh sách [sự kiện trong góc][https. // góc cạnh. io/hướng dẫn/ràng buộc sự kiện

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ó

Thành phần được đưa vào sẽ không sẵn sàng cho đến khi vòng đời afterViewInit bắt đầu

Đầ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[]

import { Component, Input, OnInit } from '@angular/core';

export class ProductListComponent implements OnInit {
  @Input[] productList = [];
  ngOnInit[] {}
}

6

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đọc thêm về ViewChild

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

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

0

Và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

 
    {{ product.name }}
  

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đọc thêm về AfterViewInit

Vào ứng dụng. thành phần. html hiển thị sessionId

 
    {{ product.name }}
  

1

Và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 vi

Cá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

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

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

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

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

• Không phải là vấn đề về dữ liệu được cập nhật [ví dụ: ViewChild lấy dữ liệu trên vòng đời AfterView, để tiếp tục đồng bộ hóa, có thể sử dụng nội dung bổ sung, như DetectChanges, v.v. ]
• Các thành phần sử dụng dịch vụ lấy dữ liệu cập nhật
• Không yêu cầu mối quan hệ như một thành phần con hoặc lồng nhau là một vấn đề

Đầu tiên, tạo một dịch vụ

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

34 với thuộc tính là chủ thể hành vi trường

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

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ẩm

Tiếp theo, tạo một phương thức mới,

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

37, để đặt sản phẩm đã chọn và cập nhật hành vi

 
    {{ product.name }}
  

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đọc thêm về chủ đề hành vi

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

 
    {{ product.name }}
  

3

Và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

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

37 từ dịch vụ sản phẩm

 
    {{ product.name }}
  

4

Và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ẩm

Chú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

• Khai báo chủ thể hành vi và phương thức cho danh sách sản phẩm
• Đăng ký danh sách sản phẩm với dịch vụ để nhận danh sách sản phẩm

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

 
    {{ product.name }}
  

5

Và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

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

41 từ dịch vụ

 
    {{ product.name }}
  

6

Và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

 
    {{ product.name }}
  

7

Và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ẩm

Tương tự như

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

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

export class AppComponent {
  products = [
    { name: 'Rice', id: 1, price: 200 },
    { name: 'Beans', id: 2, price: 300 },
    { name: 'Bananna', id: 3, price: 400 },
  ];

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

 
    {{ product.name }}
  

8

Và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ận

Trong 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?

Làm cách nào để lấy dữ liệu từ tệp HTML sang tệp TS trong Angular 7?

Làm cách nào để đưa HTML vào tệp TS?

Làm cách nào để lấy giá trị từ HTML sang thành phần trong Angular?