[MUSIC]
Sử dụng Bộ định tuyến góc, chúng tôi đã học được cách chúng tôi có thể điều hướng
từ chế độ xem này sang chế độ xem khác bằng cách sử dụng chỉ thị liên kết bộ định tuyến để xác định liên kết.
Và cũng là mô-đun bộ định tuyến, cho phép chúng tôi với đặc điểm kỹ thuật của đường dẫn,
để điều hướng đến quan điểm của các thành phần khác nhau.
Bây giờ, chúng ta hãy lấy một ví dụ về thành phần dishdetail.
Cho đến nay, thành phần dishdetail đã hoạt động bằng cách nhận được các chi tiết
của món ăn cụ thể mà nó cần để hiển thị từ thành phần menu.
Nhưng điều này đã được tạo điều kiện bởi vì thành phần dishdetail có một tài sản
được gửi trong giá trị.
Và sau đó chúng tôi đã sử dụng trang trí đầu vào cho
các biến bên trong thành phần dishdetail để có được giữ của giá trị đó
đã được thông qua từ thành phần menu.
Bây giờ, khi bạn có các thành phần này được định tuyến để sử dụng một bộ định tuyến,
kết nối này giữa các thành phần không còn tồn tại.
Vì vậy, chúng ta cần phải tận dụng bộ định tuyến góc để có thể truyền
thông tin từ thành phần này sang thành phần khác.
Và điều này thường được thực hiện dưới dạng tham số.
Các tham số có thể được chỉ định là tham số tuyến đường,
vì chúng ta sẽ học một chút sau đó, hoặc tham số truy vấn.
Vì vậy, đối với Angular Router, những gì chúng tôi đã học được cho
đến nay là các đường dẫn được chỉ định như một URL.
Giả sử bạn cần phải truyền một giá trị tham số từ thành phần này sang thành
phần khác.
Vậy làm thế nào để làm điều đó?
Bây giờ, cách duy nhất bạn đang giao tiếp giữa các thành phần
là bằng cách sử dụng liên kết bộ định tuyến.
và/hoặc
sử dụng mô-đun bộ định tuyến để thực hiện điều hướng từ thành phần này sang thành phần khác.
Bây giờ, đây là nơi mà khả năng xác định các giá trị tham số trong URL cho
một thành phần, đường dẫn cho một thành phần, cho phép chúng ta vượt qua thông tin này.
Vì vậy, ví dụ, nếu chúng ta muốn có thể hiển thị một món ăn
với một id 42 trong thành phần dishdetail.
Nếu chúng ta có khả năng xác định một cái gì đó như /dishdetail/42.
Và sau đó để cho dishdetail nhận số 42 từ URL trực tiếp.
Sau đó, chúng tôi đã tạo điều kiện cho một cơ chế để truyền tải thông tin này
một thành phần để một thành phần khác khi chúng tôi đang điều hướng đến thành phần khác.
Đây là những gì trong mô-đun Angular Router được gọi là một tham số tuyến đường.
Làm thế nào để một tham số tuyến đường hoạt động?
Vì vậy, khi bạn chỉ định một tham số route trong định nghĩa đường dẫn,
tham số route này được xác định bằng cách sử dụng một token.
Vì vậy, khi bạn chỉ định đường dẫn trong đặc tả đường dẫn cho
các tuyến đường, bạn sẽ chỉ định một đường dẫn như thế này.
Vì vậy, bạn sẽ nói, dishdetail/:id
Vì vậy, nơi id trở thành mã thông báo mà mang
tham số route đến các thành phần cụ thể.
Thành phần dishdetail trong ví dụ này.
Vì vậy, theo cách này, bạn có thể chỉ định một tham số tuyến đường trong đường dẫn.
Và sau đó từ một vị trí khác, bạn có thể chuyển tham số
đến thành phần cụ thể cần tham số này.
Thành phần dishdetail trong ví dụ này.
Bây giờ, câu hỏi quan trọng tiếp theo sẽ nảy sinh trong tâm trí của bạn là,
làm thế nào để chúng ta vượt qua tham số tuyến đường này?
Bây giờ, khi bạn nghĩ về nó, khi bạn điều hướng thông qua các thành phần dishdetail.
Bạn đang đến từ một thành phần khác bằng cách nhấp vào một liên kết hoặc sử dụng một
cái gì đó gọi là chức năng điều hướng như mô-đun tuyến đường cung cấp cho chúng tôi.
Chúng ta sẽ xem xét cả hai cách điều hướng đến một thành phần cụ thể.
Bây giờ, nếu bạn cần chỉ định tham số tuyến đường, khi bạn chỉ định liên kết, hãy
nhớ lại rằng chúng tôi đã chỉ định liên kết bằng cách sử dụng
chỉ thị liên kết bộ định tuyến trong các tệp mẫu của chúng tôi.
Bây giờ, nếu bạn định chỉ định điều này trong các tập tin mẫu,
sau đó liên kết router cũng mất trong một mảng như chúng ta thấy. M@@
ột mảng tham số liên kết,
nơi bạn có thể xác định rõ ràng tham số đang được chuyển tiếp.
Vì vậy, ví dụ, trong ví dụ này mà bạn thấy ở đây, chúng tôi đang chỉ định một.
và sau đó bạn đang làm một NGFor.
Vì vậy, bạn đang looping thông qua một tập hợp các đối tượng JavaScript trong
một mảng đối tượng JavaScript.
Sau đó, khi bạn chỉ định liên kết bộ định tuyến.
Vì vậy, trong đó, bạn có thể chỉ định liên kết bộ định tuyến.
Nhưng bây giờ, được bao quanh bởi dấu ngoặc vuông.
Và điều này sẽ mất trong một giá trị như thế này có một mảng tham số liên kết.
Vì vậy, ở đây, bạn có thể chỉ định các phần khác nhau của tham số liên kết.
Và Angular Router sẽ kết hợp chúng với nhau để tạo thành URL thực tế.
Vì vậy, ở đây, bạn có thể thấy rằng phần đầu tiên của tham số liên kết được chỉ định
như một chuỗi ở đây, vì vậy /dishdetail ở đây.
Nhưng phần thứ hai được xác định như là một giá trị mà đang được thu được
từ món ăn.
Đó là món ăn, đối tượng JavaScript từ mảng đối tượng JavaScript ở đây.
Vì vậy, mỗi món ăn sẽ mang theo một dish.id.
Vì vậy, dish.id có thể được xác định là
một trong các giá trị trong mảng tham số liên kết này ở đây.
Vì vậy, khi bạn nhấp vào điều này, cho các món ăn cụ thể,
dish.id này sẽ được thay thế bởi id cụ thể cho món ăn.
Vì vậy, ví dụ, nếu id là 42, thì điều này sẽ được thay thế bằng 42.
Vì vậy, khi Router góc nhận được liên kết router này,
sau đó nó sẽ xây dựng URL như /dishdetail/42.
42 là giá trị của dish.id tại thời điểm này.
Vì vậy, đó là cách bạn có thể vượt qua trong tham số.
Phần thứ hai của câu hỏi, tất nhiên,
là làm thế nào để thành phần lấy giá trị này từ tham số liên kết?
Điều đó chúng ta sẽ nói về trong slide tiếp theo.
Một cách khác mà bạn có thể gây ra điều hướng này đến thành phần khác
cũng là sử dụng một phương pháp gọi là điều hướng được cung cấp bởi mô-đun bộ định tuyến.
Vì vậy, bạn có thể nói, this.router.navigate.
Vì vậy, điều này có thể được bao gồm trong mã TypeScript
của bạn hoặc mã JavaScript của bạn để tự động gây ra điều hướng đến khác.
Vì vậy, điều này có thể được bao gồm bên trong một phương thức mà bạn
bao gồm trong mã TypeScript của thành phần của bạn.
Và điều đó có thể được gọi từ mẫu của bạn.
Ví dụ, bằng cách nhấp vào một liên kết ở đó.
Vì vậy, trong đó trong mã, bạn có thể bao gồm một tuyên bố như thế này,
this.router.navigate.
Và phương pháp điều hướng này lấy cùng một mảng tham số liên
kết như giá trị tham số.
Vì vậy, điều này cũng sẽ cho phép thông tin này được cung cấp cho các bộ định tuyến góc để
nó có thể điều hướng đến các thành phần khác.
Bây giờ, chúng ta hãy đi đến phía bên kia của phương trình này.
Làm thế nào để một thành phần, giống như thành phần dishdetail trong ví dụ này,
lấy giá trị này được chỉ định như là mã thông báo trong liên kết URL ở đó?
Bây giờ, đây là nơi thư viện Angular Router cung cấp
một dịch vụ được gọi là dịch vụ ActivateDroute.
Dịch vụ ActivateDroute này có thể được tận dụng để có thể lấy
các giá trị này.
Bây giờ, đặc biệt, để tạo thuận lợi cho việc truy xuất tham số này,
dịch vụ ActiveDroute cung cấp ba điều khác nhau.
Ví dụ, nó cung cấp phương pháp này để lấy URL.
Đó là một quan sát của con đường tuyến đường.
Mà được biểu diễn dưới dạng một mảng các chuỗi cho mỗi đường dẫn tuyến đường.
Bạn đã gặp phải từ này quan sát được ở đây.
Trong thời điểm này, hãy giữ lấy từ đó.
Chúng tôi sẽ trở lại, nhìn vào những gì một quan sát được trong mô-đun tiếp theo.
Nhưng cho thời điểm này, những gì chúng tôi nhận ra là
dịch vụ ActivateDroute này cung cấp điều này có thể quan sát được.
Tương tự, dịch vụ ActiveDroute cũng cung cấp một tham số khác có thể quan sát được gọi là tham số. Tham số
này quan sát làm cho có sẵn cho một thành phần
các giá trị tham số đang được thông qua như là các tham số tuyến đường.
Vì vậy, tham số này quan sát được là một trong những mà chúng ta sẽ sử dụng
để lấy giá trị này trong thành phần dishdetail.
Bạn sẽ thấy phương pháp chính xác của việc thực hiện điều đó
trong bài tập sau bài giảng này.
Tương tự như vậy, bạn cũng có thể truyền trong tham số truy vấn cho một thành phần khác.
Bây giờ, chúng ta sẽ không đối phó với một ví dụ về các tham số truy vấn ngay bây giờ.
Nhưng sau đó, chúng ta có thể gặp một ví dụ về cách bạn có thể chuyển tham
số truy vấn thông qua dịch vụ ActiveDRoute sang một thành phần khác.
Với sự hiểu biết này, chúng ta hãy đi trước bài tập tiếp theo.
Chúng tôi sẽ tiếp tục phát triển ứng dụng trang đơn.
Và sau đó cho phép sử dụng một tham số tuyến đường để vượt qua
trong id của một món ăn để thành phần dishdetail.
Vì vậy mà các thành phần dishdetail, lần lượt, có thể sử dụng id này để truy vấn các dịch vụ món ăn.
Để có được các chi tiết của món ăn cụ thể mà nó được
cho là hiển thị trong tầm nhìn của nó.
[ NHẠC]