Bây giờ bạn đã nhận được bàn chân của bạn ướt với Angular quan sát trong bài tập trước đó,
bạn đang nhìn lại và nói rằng,
“Ồ, quan sát không phải là xấu sau khi tất cả,
họ là khá đơn giản để sử dụng.”
Vì vậy, chúng ta có nhiều tham vọng hơn một chút.
Chúng ta hãy đi thêm một bước nữa và sau đó sử dụng một tích hợp quan sát được trong Angular.
Các tham số quan sát được xuất phát từ
dịch vụ tuyến đường kích hoạt trong mô-đun bộ định tuyến của chúng tôi.
Bây giờ chúng ta sẽ cập nhật thành phần chi tiết món ăn,
để sử dụng các tham số có thể quan sát được từ
dịch vụ hạn hán kích hoạt để
hỗ trợ một số tính năng mới trong ứng dụng Angular của chúng tôi.
Trước khi chúng tôi tiếp tục cập nhật thành phần chi tiết món ăn,
tôi muốn giới thiệu thêm một phương pháp trong tập tin service.t món ăn của tôi.
Vì vậy, mở tập tin service.t món ăn và sau đó chúng tôi sẽ thêm một phương pháp mới gọi là
getDishids và điều này về cơ bản sẽ
trả lại tất cả các ID món ăn là cho tất cả các món ăn trong bộ sưu tập của chúng tôi về món ăn.
Vì vậy, để làm điều đó, chúng tôi sẽ sử dụng một trở lại
và phương pháp và trước khi tôi làm điều đó, điều
này là trả về một quan sát được.
Loại gì?
Đây là trả về một quan sát được bao gồm một mảng
chuỗi và chúng ta hãy trì hoãn
nó bằng 2.000 mili giây hoặc hai giây.
Vậy, chúng ta muốn quay trở lại là gì?
Chúng tôi muốn lấy mảng món ăn,
trích xuất ra tất cả các ID từ mảng món ăn và
sau đó cung cấp cho thành phần Dish Detail của chúng tôi,
bởi vì chúng tôi cần rằng trong thành phần Dish Detail của chúng tôi để thực hiện
các tính năng mới mà chúng tôi sẽ hỗ trợ trong ứng dụng của chúng tôi.
Bây giờ, đây là một cách mà tôi muốn thực hiện nó.
Sau đó, chúng ta có thể thấy làm thế nào chúng ta có thể làm điều đó một cách tốt hơn,
trong một trong những bài tập sau này.
Hiện tại, với cách thức thực hiện dịch vụ,
đây là cách tốt nhất mà tôi có thể làm để thực hiện giải pháp này để chứng minh một tính năng mới.
Vì vậy, trong tầm quan sát,
những gì tôi sẽ làm là,
tôi sẽ lấy mảng món ăn và mảng món ăn.
Tôi sẽ sử dụng bản đồ,
một nhà điều hành mảng, bản đồ điều hành mảng JavaScript.
Vì vậy, các nhà điều hành bản đồ,
làm thế nào nó hoạt động là nó mất mỗi mục từ mảng món ăn và chúng ta có thể ánh xạ
mục đó vào một mục khác và sau đó xây dựng
mảng khác và sau đó trả về mảng sửa đổi đó.
Vì vậy, đối với mỗi mục trong mảng món ăn của
tôi, tôi sẽ lấy mục đó và sau đó thay vào đó
trích xuất ID món ăn và sau đó từ ID món ăn.
Vì vậy, tôi sẽ kết thúc xây dựng một mảng mới ra khỏi nó,
trong đó chỉ chứa các ID,
do đó, một mảng các ID và chúng ta đã thấy rằng các ID là chuỗi,
đó là những gì tôi sẽ trở về từ ID món ăn của tôi ở đây.
Đó là nó, toán tử mảng bản đồ.
Nếu bạn tra cứu các toán tử mảng JavaScript,
bạn sẽ thấy điều mà toán tử mảng bản đồ làm.
Thật vậy, toán tử mảng bản đồ cũng
thú vị từ quan điểm của các quan sát được,
bởi vì một quan sát được như bạn thấy,
cũng có thể được xem như một mảng,
một luồng các giá trị,
có thể được xem như một mảng.
Vì vậy, các nhà điều hành bản đồ cũng có thể được sử dụng trong quan sát.
Nhưng tại thời điểm này, tôi đang sử dụng nó đơn giản như một toán tử mảng JavaScript.
Hãy lưu các thay đổi.
Bây giờ, chúng ta sẽ đi đến thành phần chi tiết Dish và sau đó cập nhật thành phần chi tiết Dish.
Bây giờ, trong thành phần chi tiết Dish,
cùng với Dish,
tôi sẽ khai báo một biến được gọi là DishIds,
mà là một mảng của chuỗi.
DishIds này sẽ lưu trữ tất cả các ID của
tất cả các món ăn trong bộ sưu tập của tôi về các món ăn trong thực đơn của tôi.
Sau đó, tôi cũng sẽ có
thêm hai biến được gọi là trước và tiếp theo của chuỗi loại.
Bây giờ, tại sao tôi cần những thứ này?
Điều đó sẽ trở nên rõ ràng hơn một chút, một
khi bạn thực hiện quan điểm,
nơi tôi sẽ sử dụng điều này.
Bây giờ, những gì tôi sẽ làm ở đây là,
bên trong NGInit của tôi trước đó,
chúng tôi đã cho id là bằng cộng với route.snapshot params ID này.
Khi tôi làm điều này trong bài tập trước,
tôi đã không giải thích cho bạn những gì ảnh chụp nhanh đang làm và tại sao chúng tôi làm theo cách này?
Bởi vì bạn cần phải hiểu những người quan sát,
trước khi bạn hiểu những gì ảnh chụp có nghĩa là.
Bây giờ, trong Angular, dịch vụ tuyến đường kích hoạt cung cấp một tập hợp các quan sát được.
Một trong những quan sát được gọi là một params.
Những gì params này cung cấp cho chúng tôi,
là một cách để có được các giá trị tham số trong URL của tôi.
Vì vậy, bạn thấy rằng khi bạn giới thiệu các thông số tuyến đường,
bạn đã giới thiệu một trong các thông số tuyến đường như dấu hai chấm ID.
ID dấu hai chấm đó trở nên có sẵn như là một quan sát được.
Vì vậy, bất cứ khi nào giá trị đó thay đổi,
bạn có thể quan sát những thay đổi trong giá trị đó và sau đó thực hiện hành động tương ứng.
Nhưng, trước đó khi chúng tôi thực hiện các thành phần chi tiết món ăn,
chúng tôi không biết về quan sát được.
Vì vậy, tôi không thể giải thích những gì ảnh chụp nhanh đang làm tại thời điểm đó.
Bây giờ, hãy để tôi quay lại và giải thích chính xác những gì ảnh chụp nhanh làm.
Khi chúng tôi sử dụng này như là ảnh chụp ở đây,
những gì chúng tôi đang làm là,
chúng tôi đang lấy một ảnh chụp từ
dịch vụ tuyến đường và sau đó chúng tôi đang có được
các tham số quan sát tại thời điểm cụ thể của thời gian.
Giá trị của các tham số tại
thời điểm cụ thể đó và sau đó sử dụng nó trong ứng dụng của chúng tôi.
Mặc dù đó không phải là cách lý tưởng để làm điều đó.
Thay vào đó, vì vậy chúng ta hãy sử dụng các quan sát
trực tiếp và sau đó đáp ứng bất cứ khi nào mà quan sát được thay đổi.
Vì vậy, làm thế nào để chúng tôi cập nhật mã này để sử dụng các quan sát trực tiếp?
Vì vậy, những gì chúng tôi nhận ra là từ các dịch vụ tuyến đường kích hoạt,
chúng tôi có các params có thể quan sát sẵn cho chúng tôi.
Vì vậy, chúng tôi sẽ làm cho việc sử dụng các tham số quan sát
được và bất cứ khi nào có một sự thay đổi trong nơi params quan sát được,
chúng tôi có thể bắt đầu một sự thay đổi trong thành phần DishDetail của chúng tôi.
Hãy để tôi minh họa cho bạn làm thế nào chúng tôi sẽ làm cho việc sử dụng
các params quan sát được bằng cách cập nhật mã này.
Vì vậy, đi đến mã này,
những gì tôi sẽ làm bây giờ,
là tôi sẽ thay đổi điều này thành nói,
“Tôi có tuyến đường này và từ tuyến đường này,
tôi có các params có sẵn đã.”
Vì vậy, tôi sẽ loại bỏ các ảnh chụp nhanh và tôi sử dụng các tham số.
Vì vậy, với params này,
những gì tôi có bây giờ là truy cập vào các params quan sát được.
Bây giờ, kể từ khi chúng ta có params này quan sát được,
Tôi sẽ sử dụng một nhà điều hành trên params này quan sát được và sau đó sửa đổi nó.
Vì vậy, các nhà điều hành mà tôi sẽ sử dụng được gọi là nhà điều hành SwitchMap.
Các nhà điều hành SwitchMap
cho phép tôi sử dụng các tham số quan sát được và bạn thấy dòng squiggly màu đỏ có nghĩa là,
rằng tôi cần phải nhập khẩu SwitchMap quan sát được ở đây.
Vì vậy, tôi sẽ đi vào
đầu vào của tôi ở đây và
sau đó tôi sẽ nhập rxjs và nhà điều hành.
Vì vậy, từ params quan sát được,
tôi nhận được params đó là loại Params.
Vì vậy, nhớ lại rằng chúng tôi đã nhập các params từ thư viện bộ định tuyến ở đây.
Vì vậy, chúng tôi nhấn mạnh để params ở đây,
từ thư viện bộ định tuyến và chúng tôi cũng nhập khẩu dịch vụ tuyến đường kích hoạt ở đây,
và sau đó chúng tôi làm cho chúng có sẵn trong nhà xây dựng của chúng tôi ở đây,
thông qua các tuyến đường kích hoạt.
Vì vậy, đó là lý do tại sao chúng ta có thể làm điều này params tuyến đường để có được giữ của các params quan sát được.
Tôi sẽ sử dụng các nhà điều hành SwitchMap trên params
quan sát được và sau đó khi tôi nhận được các params quan sát được,
những gì tôi sẽ làm là để có điều đó và sau đó nói, DishService này.
GetDish, và sau đó ID này bây giờ nên được thu được bằng cách sử dụng các params.
Bạn thấy tham số mà chúng tôi có ở đó.
Từ các tham số, tôi sẽ nói trong dấu ngoặc ID.
Vì vậy, những gì xảy ra là bất cứ khi nào các tham số quan sát được thay đổi giá trị,
có nghĩa là các thông số tuyến đường thay đổi giá trị, sau đó ngay lập tức,
các nhà điều hành bản đồ chuyển đổi sẽ mất giá trị params,
và sau đó làm một GetDish từ DishService của tôi.
Vì vậy, điều này sẽ được tự động khởi xướng,
và điều này sẽ có sẵn như
quan sát khác được phát ra bằng cách làm điều hành bản đồ chuyển đổi này trên quan sát này.
Vì vậy, chúng tôi đang tạo ra một quan sát mới đó là GetDish,
mà sẽ trả lại các đối tượng món ăn ở đây.
Bây giờ, một khi chúng ta có được GetDish ở đó,
sau đó bây giờ có thể có sẵn như là một quan sát được.
Tôi chỉ cần đăng ký để quan sát được bằng cách sử dụng đăng ký ở đây.
Sau đó, ở đó tôi có được món ăn.
Món ăn này thu được bằng cách làm GetDish này ở đây.
Món ăn đó, sau đó tôi có thể sử dụng để lập bản đồ nó vào
biến món ăn của tôi mà tôi đã khai báo trước đó.
Vì vậy, theo cách này, món ăn của tôi bây giờ được cập nhật.
Vì vậy, bất cứ khi nào các params có thể quan sát được thay đổi,
món ăn của tôi sẽ được cập nhật cho món ăn mới.
Vì vậy, chú ý làm thế nào tôi đang lấy một quan sát, các tham số quan sát được,
và sau đó tôi đang ánh xạ các tham số quan sát được vào một quan sát được mà về cơ bản là
đi trong lấy giá trị món ăn từ DishService của tôi,
và sau đó làm cho rằng có sẵn như là một quan sát được.
Sau đó, tôi đăng ký để quan sát được ở đây, và sau đó,
tôi nhận được giá trị món ăn ở đây,
và sau đó tôi đang lập bản đồ giá trị món ăn hoặc thay vì
làm cho biến món ăn bằng giá trị món ăn ở đây.
Chú ý làm thế nào bằng cách sử dụng các quan sát,
bây giờ bạn có thể lấy một quan sát được sau đó ánh xạ nó vào một quan sát khác.
Tại sao điều này lại thú vị?
Nếu bây giờ, tôi có một cách để sửa đổi tham số tuyến đường
đó, sau đó tôi sẽ có thể chuyển đổi giữa các món ăn khác nhau và xem các món ăn khác nhau.
Thật không may, tôi không có điều đó tại chỗ.
Vì vậy, tôi cần phải sửa đổi các thành phần món ăn để cho phép tôi làm điều đó.
Bây giờ, đây là nơi tôi sẽ bao gồm một vài nút vào chế độ xem của tôi mà khi tôi nhấp vào,
tôi sẽ có thể điều hướng qua danh sách các món ăn của tôi.
Bây giờ, để có thể điều hướng qua danh sách các món ăn của tôi,
tôi cần phải biết bộ tất cả các món ăn của tôi,
hoặc ít nhất tôi cần phải biết ID của tất cả các món ăn của tôi.
Đó là lý do tại sao tôi sử dụng DishID này ở đây, được chứ?
Vì vậy, bây giờ bạn thấy lý do tại sao tôi bao gồm các phương pháp DishIds vào DishService của tôi.
Vậy, sau đó tôi bắt đầu.
Tôi sẽ đầu tiên có được
DishIds bằng cách
gọi DishService,
phương pháp GetDishIds tại thời điểm đó.
Tôi vẫn đang làm việc với cách làm việc cũ.
Tôi phải nhận ra rằng GetDishids này đang gửi đi trong quan sát được.
Vì vậy, tôi cần phải đăng ký để quan sát điều đó.
Bạn thấy cách bạn cần thay đổi cách suy nghĩ của
bạn khi bạn đang hoạt động với các biến số ở đây.
Vì vậy, chúng tôi sẽ nói DishIds đăng ký,
và bên trong đăng ký,
chúng tôi sẽ có được tham số đó là một mảng chuỗi,
và sau đó tôi sẽ nói ngay ở đó,
DishIds sẽ bằng DishIds.
Thấy không, dễ dàng
thay đổi cách suy nghĩ của bạn khi bạn muốn đối phó với một người quan sát.
Vì vậy, GetDishIds đang gửi một quan sát được,
và tôi đăng ký để quan sát được và sau đó tôi có DishIds ở đây có sẵn.
Sau đó, cũng bằng cách đăng ký tham số.
Nếu tôi có thể thay đổi tham số của tôi,
giá trị tham số tuyến đường giá trị trong mã của tôi,
sau đó tôi sẽ có thể điều hướng giữa các món ăn.
Vì vậy, chúng ta hãy thực hiện phần đó.
Chuyện này đang trở nên thú vị.
Vì vậy, để cho phép tôi làm điều đó,
vì vậy tôi sẽ giới thiệu một phương pháp khác ở đây được gọi là setPreNext,
và điều này, tôi sẽ gửi một tham số disHid.
Bây giờ, với disHid hiện tại của
tôi, tôi muốn có thể tìm thấy các disHid trước đó và tiếp theo để tôi có thể thực hiện
điều hướng của tôi giữa các món ăn trong thành phần dishdetail của tôi.
Vì vậy, đó là lý do tại sao tôi tuyên bố prev và tiếp theo.
Bây giờ, tôi cần để có thể khởi tạo hai giá trị này.
Tất cả những gì tôi biết bây giờ là DisHid hiện tại của tôi.
Vì vậy, bằng cách sử dụng disHid hiện tại,
tôi muốn có thể tìm thấy các disHid trước đó và tiếp theo.
Vì vậy, trong phương pháp này,
tôi sẽ làm trước đó và tiếp theo disHid.
Vì vậy, ở đây tôi sẽ nói,
hãy chỉ số bằng DishID này.
Bây giờ, tôi chỉ biết ID của món ăn của tôi,
nhưng ID của món ăn của tôi không cho tôi mọi thứ.
Tôi cần để có thể tìm thấy các món ăn trong mảng này của ID,
vì vậy đó là lý do tại sao tôi nói DishID này, và IndexOf.
Bạn nên biết toán tử IndexOf trên một mảng JavaScript.
Toán tử IndexOf lấy một giá trị và sau đó tìm chỉ mục của giá trị đó trong mảng.
Vì vậy, IndexOf và tham số ở đây,
tôi sẽ cung cấp cho là DisHid,
DisHid mà tôi sẽ có được trong một thời gian ngắn.
Bây giờ, một khi tôi có được chỉ số của giá trị hiện tại này,
tôi có thể sau đó ánh xạ
hai DishID trước đó.
Vì vậy, đây là nơi tôi
sẽ làm một số ít mã phức tạp ở đây sẽ cho phép tôi để quấn xung quanh khi tôi.
Vì vậy, lưu ý rằng mảng DishIds này chứa một số lượng nhất định của các giá trị đó.
Nếu giá trị hiện tại của tôi DisHid là mục đầu tiên,
sau đó giá trị trước đó sẽ là mục được lập chỉ mục zeroth trong mảng của tôi.
Nhưng nếu giá trị hiện tại của tôi là mục zeroth,
mục đầu tiên trong mảng của tôi,
sau đó tôi muốn quấn xung quanh để có được mục cuối cùng trong mảng của tôi.
Vì vậy, đây là nơi tôi sử dụng toán tử modulo với
một số cách toán học để gói mọi thứ xung quanh.
Vì vậy, tôi sẽ nói điều này DisHid
cộng với chỉ số trừ đi một, và modulo này Dishids' chiều dài.
Vì vậy, những gì tôi đang làm là,
giá trị trước đó sẽ là chỉ số hiện tại, chỉ
số của giá trị hiện tại,
cộng với chiều dài của các món ăn trừ đi một.
Bây giờ, nếu chỉ số là một,
chỉ số trừ đi một sẽ cho tôi zero.
Nếu chỉ số là 0,
chỉ số trừ đi một sẽ cho tôi trừ đi một,
nhưng đó không phải là những gì tôi muốn.
Tôi muốn quấn quanh và lấy chiều dài disHid trừ đi một.
Vì vậy, đó là lý do tại sao tôi bao gồm điều này trong đó,
và sau đó làm một modulo với DishIds.
Vì vậy, khi index là zero,
tôi sẽ quấn xung quanh để có được mục cuối cùng trong mảng của tôi.
Vì vậy, đó là cách tôi khởi tạo giá trị trước đó.
Sau đó, giá trị tiếp theo,
tôi sẽ sử dụng cùng một cách tiếp cận,
nhưng quấn xung quanh bằng cách nói chỉ số cộng với một.
Vì vậy, nếu tôi hiện đang ở mục cuối cùng trong mảng,
sau đó tôi muốn quấn quanh bằng không.
Vậy, đó là phần còn lại của những gì tôi đang làm.
Vì vậy, ở đó, tôi đang thiết lập trước đó và tiếp theo.
Vì vậy, khi nào tôi nên đặt trước và tiếp theo?
Bất cứ khi nào món ăn của
tôi thay đổi, tôi cần phải có khả năng bắt đầu một cuộc gọi cho điều này.
Bây giờ, tôi đang thay đổi giá trị món ăn của mình ở đâu?
Nhìn lại đăng ký ở đây,
chú ý rằng ngay tại đó,
bạn đang thay đổi món ăn của bạn mỗi khi tham số của chúng tôi thay đổi.
Vì vậy, tại thời điểm đó,
tôi muốn đặt lại giá trị trước đó và tiếp theo của tôi.
Vì vậy, tôi sẽ thay đổi điều này thành một khối mã ở đây.
Sau đó, tôi sẽ nói setPreNext này,
và sau đó tham số sẽ là DisHid.
Đó là nó. Vì vậy, với sự thay đổi này,
những gì xảy ra là mỗi khi món ăn của tôi được cập
nhật, tôi sẽ cập nhật trước đó và tiếp theo cũng tương ứng từ đây.
Vì vậy, với sự thay đổi nhỏ này,
DisHid của tôi sẽ là món ăn hiện tại.
Trước đó sẽ được chỉ vào món ăn trước đó,
và tiếp theo sẽ được chỉ vào DisHid tiếp theo.
Vì vậy, tôi có tất cả ba thứ tôi cần.
Bây giờ, tôi có thể sử dụng ba giá trị này để thực hiện cách điều hướng
giữa các món ăn trong mẫu của tôi bằng cách bao gồm một vài nút vào mẫu của tôi.
Vì vậy, chúng ta hãy đi đến mẫu thành phần dishdetail,
và sau đó bao gồm một vài nút cho phép tôi điều hướng giữa các món ăn.
Đi đến thành phần Dish Detail trong khi tôi đang ở đây,
hãy để tôi lấy NGIf này từ thẻ này và sau đó di chuyển nó vào div lên đó.
Tôi muốn ẩn toàn bộ div,
khi món ăn của tôi hiện không phải là khiếm khuyết,
tương tự cho các ý kiến cũng.
Tôi thấy điều này là một chút kinh ngạc
khi thông tin món ăn của tôi đang được lấy từ máy chủ.
Vì vậy, tôi sẽ thực hiện thay đổi này cho cả hai divs rằng
một trong những hiển thị các ý kiến và một trong những khác cho thấy các chi tiết của món ăn trong thẻ.
Với hai bản cập nhật này,
bên trong hành động thẻ của
tôi, Tôi sẽ bao gồm
một nút khác của loại nút rõ ràng và nút này,
Tôi sẽ bao gồm RouterLink.
Khi bạn nhìn thấy liên kết bộ định tuyến,
bạn ngay lập tức nói, “Ồ,
tôi biết bạn đang cố gắng làm gì.
Bạn đang cố gắng chuyển đổi nút này để có thể điều hướng giữa các
thành phần khác nhau trong dịch vụ của tôi.”
Vì vậy, đối với RouterLink,
tôi sẽ cung cấp một mảng các giá trị và mảng các giá trị cho RouterLink,
tôi sẽ làm dishdetail.
Ngoài ra, phần thứ hai.
Thấy chưa, đây là phần thú vị.
Phần thứ hai của mảng này sẽ là prev,
đó là biến mà tôi khai báo trong thành phần của tôi.
Vì vậy, với điều này, nút này sẽ trở thành một liên kết đến món ăn trước đó trong danh sách các món ăn của tôi.
Spiffy, phải không?
Vậy, với điều đó, còn gì nữa?
Hãy để tôi đóng nút ở đây và sau đó bên trong nút,
Tôi sẽ sử dụng một biểu tượng Font Awesome
fa chevron-trái.
Vậy, đúng vậy. Nút này sẽ là một nút có biểu tượng ở đó.
Vì vậy, bây giờ chúng ta có một nút ở đây,
tôi cũng sẽ bao gồm một nút khác ở đây.
Trước khi tôi bao gồm các nút,
tôi sẽ làm span lớp flex-spacer,
bạn thấy tôi sử dụng flex-spacer trong một trong những bài tập trước đó.
Vì vậy, bạn thấy những gì tôi đang làm,
tôi đang kéo dài để bao gồm nút thứ hai.
Vì vậy, đối với nút thứ hai,
tôi chỉ cần sao chép này
và sau đó dán nó ở đó và sau đó cập nhật này để nói prev.
Thay vì trước đó, tôi sẽ đi tiếp theo và sau đó
fa-chevron-trái sang fa-chevron-phải, và đó là nó.
Hãy lưu các thay đổi đối với thành phần Dish Detail Components của chúng tôi,
và cũng là các tập tin còn lại.
Sau khi cập nhật này, chúng ta hãy đi và kiểm tra những gì ứng dụng của chúng tôi làm.
Đi đến ứng dụng của tôi trong trình duyệt,
chúng ta hãy đi đến thành phần Menu.
Chúng tôi thấy Menu và chúng ta hãy chọn một mục từ Menu ở đây.
Vì vậy, lưu ý rằng bây giờ mục này từ món ăn menu được hiển thị ở đây.
Chú ý ở phía dưới,
chúng tôi có hai nút ở đây, trái và phải.
Khi chúng ta nhấp vào nút bên trái,
lưu ý cách chúng ta có thể di chuyển đến món ăn trước đó trong danh sách các món ăn.
Tôi có thể tiếp tục làm trái một lần nữa và tiếp tục điều hướng sang trái và bên phải.
Chú ý rằng khi
tôi làm điều này, quan điểm thực tế của tôi không nhận được tải lại,
thay vào đó tôi sẽ chỉ lấy
dữ liệu liên quan đến đĩa từ dịch vụ và sau đó cập nhật xem của tôi ở đây.
Lý do chúng ta có thể làm điều này là bởi vì chúng ta
có thể quan sát được, các tham số quan sát được.
Vì vậy, bất cứ khi nào tôi nhấp vào hai,
trái và phải, các tham số quan sát được,
chú ý làm thế nào tại thời điểm này địa chỉ cho thấy dishdetail zero.
Nếu tôi bấm vào bên phải,
sau đó sẽ được cập nhật từ dishdetail zero để dishdetail một.
Thay đổi thông số đó, và điều đó sẽ khiến tôi quan sát được
và lấy món ăn mới từ dịch vụ món ăn.
Sau đó, món ăn mới được lấy,
biến món ăn trong thành phần của tôi được cập nhật,
và khi được cập nhật,
chế độ xem của tôi cũng được cập nhật.
Vì vậy, lưu ý rằng tôi đang sử dụng cùng một cái nhìn,
tôi có thể điều hướng trong số các món ăn khác nhau là một phần trong danh sách các món ăn của tôi.
Đây là phần thú vị mà bạn có thể nhận được bằng cách sử dụng các tham số có
thể quan sát được từ activator.service trong ứng dụng Angular của bạn.
Cách thú vị để sử dụng các hóa đơn quan sát được ứng dụng Angular của chúng tôi.
Tất nhiên, theo cách tôi đã thực hiện nó,
tôi đã làm nó một chút của một cách giả tạo để làm việc.
Tôi đã phải nắm giữ danh sách các ID món ăn.
Tôi đã phải sửa đổi trước đó và tiếp theo và như vậy.
Nếu bạn có một cách để có được
giá trị trước đó và tiếp theo tự động từ dịch vụ của bạn,
bất cứ khi nào bạn lấy một món ăn,
thì việc thực hiện điểm số sẽ trở nên dễ dàng hơn một chút.
Ngay bây giờ chúng ta không có điều đó.
Vì vậy, tôi đã làm việc xung quanh vấn đề bởi vì tôi chỉ muốn minh họa cách
sử dụng một quan sát như thế này trong ứng dụng Angular của bạn.
Nếu chúng ta có thể thực hiện dịch vụ sẽ trả lại giá trị
trước đó và giá trị tiếp theo bất cứ khi nào chúng ta lấy một món ăn,
thì tất cả đau đầu này sẽ được giải quyết đơn giản hơn rất nhiều.
Hãy trì hoãn ý tưởng đó đến giai đoạn sau.
Nhưng tại thời điểm này, bạn thấy làm thế nào chúng ta đang
sử dụng các tham số có thể quan sát được để thực hiện
một cách thú vị để hỗ trợ một tính năng mới trong ứng dụng Angular của chúng tôi.
Điều này hoàn thành bài tập này.
Đây là thời điểm tốt để bạn thực hiện một cam kết git với thông điệp RXJS Phần hai.