Bây giờ chúng ta hãy tiếp tục làm việc trên
ứng dụng trang duy nhất mà chúng tôi đã phát triển trong các bài tập của chúng tôi.
Cho đến nay, chúng tôi đã tích hợp thành phần nhà,
thành phần menu và thành phần liên lạc vào ứng dụng trang đơn của chúng tôi.
Thành phần chi tiết món ăn hiện đang được sử dụng ở dưới cùng của thành phần menu.
Vì vậy, khi bạn nhấp vào bất kỳ mục nào trong menu,
các chi tiết của món ăn được hiển thị ngay bên dưới trong menu.
Bây giờ, chúng ta sẽ tận dụng một hỗ trợ khác mà mô-đun bộ định tuyến Angular cung cấp,
cho phép chúng ta xác định một tuyến đường với một tham số được bao gồm trong định nghĩa tuyến đường.
Bằng cách này, chúng ta có thể truyền thông tin cho một thành phần khác,
và sau đó từ đó,
hiển thị thông tin trong thành phần khác.
Làm thế nào để làm việc này?
Hãy học điều đó bằng cách thực hiện bài tập này.
Vì vậy, quay lại ứng dụng của chúng tôi,
trong ứng dụng này, khi bạn nhìn vào menu,
khi bạn nhấp vào bất kỳ mục nào trong menu,
các chi tiết của mục đã chọn được hiển thị ngay bên dưới trong menu.
Bây giờ, tôi muốn tách quan điểm của các chi tiết
của món ăn đặc biệt này thành một cái nhìn riêng biệt của nó.
Khi tôi nhấp vào bất kỳ một trong số này,
tôi muốn có thể hiển thị các chi tiết của món ăn,
đặc biệt trong một cái nhìn trong ứng dụng này.
Để đạt được điều đó, chúng tôi sẽ tận dụng lợi thế, như tôi đã nói,
với các thông số tuyến đường để cho phép
chúng tôi hỗ trợ loại hành vi đó trong ứng dụng của chúng tôi.
Làm thế nào để chúng ta làm điều đó?
Hãy làm điều đó bằng cách bắt đầu với việc xác định một tuyến đường mới với một tham số ở đây.
Để sử dụng thành phần chi tiết món ăn,
chúng tôi sẽ đi vào các tuyến đường,
và sau đó xác định một tuyến đường mới sau khi thực đơn ở đây.
Nhìn vào cách tuyến đường được định nghĩa ở đây.
Vì vậy, đây là con đường, chi tiết bí ẩn.
Vì vậy, chi tiết món ăn này là một phần của thành phần chi tiết món ăn.
Vì vậy, nó có quan điểm riêng của nó.
Bây giờ, tôi muốn có thể điều hướng đến chế độ xem đó,
nhưng với một ID tham số,
bởi vì chế độ xem chi tiết món ăn này có thể hiển thị bất kỳ một trong các món ăn trong menu của tôi.
Vì vậy, tôi muốn có thể hiển thị một món ăn được lựa chọn trong chi tiết món ăn.
Bây giờ, đó là món ăn được chọn sẽ có một ID,
và tôi muốn chuyển ID đó vào các thành phần chi tiết món ăn của tôi,
để nó có thể hiển thị các chi tiết của món ăn cụ thể đó.
Vì vậy, trong bộ định tuyến Angular,
nó hỗ trợ đi qua các tham số bằng cách xác định các thông số tuyến đường như thế này,
trong định nghĩa của chính bộ định tuyến.
Vì vậy, trong đường dẫn,
nếu tôi nói dấu hai chấm,
do đó dấu hai chấm có thể được theo sau bởi một tên mà sẽ hoạt động như một tham số tuyến đường.
Vì vậy, trong trường hợp này, tôi sẽ sử dụng tên tham số như một ID.
ID này đề cập đến ID món ăn mà chúng tôi đã cung cấp cho mỗi món ăn của chúng tôi.
Bây giờ, điều này sẽ đưa tôi đến thành phần chi tiết món ăn.
Vì vậy, chúng ta sẽ thêm vào tuyến đường mới này để định nghĩa tuyến đường Angular của chúng tôi ở đây.
Lưu các thay đổi.
Bây giờ, trong thành phần menu,
vì vậy khi tôi mở tập tin mẫu thành phần menu,
trong thành phần menu,
tôi hiển thị các món ăn ở dưới cùng ở đây.
Vì vậy, tôi không muốn làm điều đó.
Vì vậy, tôi sẽ xóa phần đó từ mẫu thành phần menu của tôi.
Thay vào đó, những gì tôi nhận ra là ngay tại đó,
tôi có thể truy cập vào món ăn đặc biệt.
Vì vậy, khi các món ăn được nhấp
vào, thay vì làm điều này nhấp chuột ở đây, vì
vậy tôi sẽ loại bỏ nhấp chuột này ở đây, và thay vào đó,
tôi sẽ xác định một tham số mới ở đây được gọi là một RouterLink.
Bạn sẽ thấy việc sử dụng RouterLink ở đây.
Bây giờ, RouterLink này có trong các giá trị mà bạn có thể cung cấp trong mẫu của bạn như thế này.
Vì vậy, bạn có thể cung cấp đó như là một mảng ở đây.
Trong mảng, bạn có thể cung cấp hai phần của một mảng.
Vì vậy, chi tiết về món ăn.
Vì vậy, bạn thấy rằng khi tôi xác định tuyến đường, tôi nói “/dishdetail/:id”.
Vì vậy, bộ định tuyến Angular sẽ vượt qua bất kỳ tham số mà tôi cung cấp
ở đây như là một phần của phần thứ hai của URL đó ở đó.
Vì vậy, bây giờ, cùng với các chi tiết món ăn,
tôi sẽ xây dựng RouterLink của tôi bằng cách sử dụng chi tiết món ăn,
và cũng là ID món ăn ở đây.
Vì vậy, ID món ăn này đề cập đến món ăn cụ thể mà tôi đã
chọn từ mảng các món ăn ở đây.
Vì vậy, ID món ăn đó,
tôi có quyền truy cập vào nó ở đây.
Vì vậy, tôi sẽ sử dụng đó như là phần thứ hai bên trong mảng này của các thông số,
mà tôi sẽ vượt qua trong cho RouterLink của tôi ở đây.
Vì vậy, nếu tôi định nghĩa nó như thế này,
sau đó khi tôi nhấp vào mục cụ thể đó trong menu của tôi,
sau đó chi tiết, ID món ăn,
cùng với dishdetail này,
sẽ được thông qua như là liên kết router.
Vì vậy, thông tin đó bây giờ sẽ trở nên có sẵn thông qua
bộ định tuyến Angular của tôi để các thành phần chi tiết món ăn của tôi.
Vì vậy, bộ định tuyến cho phép thành phần chi tiết món ăn để lấy giá trị này,
ID món ăn, từ tuyến đường Angular khi thông tin này được truyền vào nó.
Làm thế nào để chúng ta làm được điều đó? Đối với điều đó,
chúng ta cần phải đi đến thành phần chi tiết món ăn và sửa chữa nó lên để nhận được thông tin này.
Vì vậy, sau khi thực hiện những thay đổi này đối với thành phần menu,
bây giờ chúng ta hãy chuyển sang thành phần chi tiết món ăn.
Bên trong thành phần chi tiết món ăn,
bạn thấy rằng hiện tại,
tôi đã nhận được món ăn như một đầu vào ở đây.
Tôi sẽ không còn nhận được các món ăn và đầu vào nữa.
Vì vậy, tôi sẽ chỉ để lại điều đó như vậy,
như đơn giản là một món ăn.
Tôi không còn cần đầu vào bởi vì tôi không đi qua thông tin này bằng cách sử dụng các món ăn,
trong dấu ngoặc vuông mà tôi bao gồm trong thành phần menu của tôi.
Thay vào đó, thông tin này về các món ăn cụ thể đến thông qua bộ định tuyến Angular.
Làm thế nào để tôi có thể truy cập vào ID món ăn đó?
Vì vậy, để làm điều đó,
tôi đi vào đây. Vào
ứng dụng này, tôi sẽ thêm vào hai nhập khẩu nữa ở đây,
một trong số họ được gọi là Params.
Vì vậy, Params này cho phép tôi truy cập vào
các thông số router có sẵn khi tôi đi vào.
Vì vậy, đây là từ bộ định tuyến Angular, Params,
và cũng là một trong những khác mà tôi cần là Vị trí.
Vị trí cho phép tôi theo dõi vị trí của
trang của tôi trong lịch sử trình duyệt của tôi.
Vì vậy, điều đó sẽ hữu ích cho tôi để điều hướng trở lại từ chi tiết món ăn của tôi khi tôi cần.
Bạn sẽ thấy tôi sử dụng nó một chút sau.
Vì vậy, hai điều mà tôi cần phải nhập: Params và Location.
Chúng ta sẽ thấy làm thế nào chúng ta sử dụng hai trong ứng dụng của chúng tôi.
Vì vậy, cùng với điều này,
chúng tôi sẽ đi vào và ở đây, cho các nhà xây dựng,
bây giờ chúng tôi lưu ý rằng giá trị món ăn bây giờ không có sẵn từ thành phần menu của tôi.
Nhưng thay vào đó, tôi phải rõ ràng đi và lấy điều này từ DishService.
Vì vậy, tôi sẽ nhập khẩu D
ishService cũng vào thành phần chi tiết món ăn của tôi.
DishService ở đây.
Vì vậy, điều này sẽ cho phép tôi đi và lấy một món ăn cụ thể từ Dish Service.
Vì vậy, bạn nhớ lại rằng chúng tôi đã có
phương pháp GetDish và Dịch vụ Dish mà chúng tôi có thể sử dụng.
Bây giờ, điều quan trọng tiếp theo đối với chúng ta là nắm giữ ID món ăn
Bây giờ, làm thế nào để giữ ID món ăn
Vì vậy, đây là nơi trong nhà xây dựng.
Bây giờ, tôi cần phải làm cho tất cả các dịch vụ này có sẵn,
vì vậy tôi sẽ nói Dish Service.
Sau đó, một trong những khác là Location.
Vì vậy, vị trí là một dịch vụ mà có sẵn cho tôi.
Vì vậy, cả hai sẽ được sử dụng trong ứng dụng của tôi.
Vì vậy, khi thành phần món ăn này được khởi tạo,
sau đó tại thời điểm này trong NgonInit,
tôi có thể đi và lấy thông tin về món ăn cụ thể từ Params.
Vậy, làm thế nào để chúng ta làm điều đó? Vậy nên
, đây là nơi tôi sẽ lấy ID,
vì vậy tôi sẽ nói cộng với cái này.
Ngoài ra để lấy giá trị tuyến đường,
tôi cần phải tiêm một dịch vụ khác gọi là dịch vụ ActiveDRoute.
Đó là một phần của bộ định tuyến Angular.
Vì vậy, dịch vụ ActivateDroute này cung cấp cho tôi quyền truy cập vào tuyến đường ở đây.
Vì vậy, tôi sẽ nói,
vì vậy cùng với DishService tôi cũng cần phải xác định thêm một
gọi là tuyến đường đó sẽ là dịch vụ ActiveDRoute ở đây.
Vì vậy, tất cả ba người này sẽ có sẵn cho tôi.
Vì vậy, ngay đó, tôi có thể yêu cầu
tuyến đường này, Snapshot, Params.
Params này là một mảng
mà tôi có thể chỉ mục bằng cách sử dụng id như giá trị, vì vậy Params id
này lấy tôi id từ tham số.
Vì vậy, khi tôi xác định URL này,
URL cho điều này sẽ được định nghĩa là Dishdetail.
Ví dụ, DishDetail 0, D
ishDetail 1, DishDetail 2, v.v.
Vì vậy, đó là cách các URL cho các thành phần này sẽ được định nghĩa ở đó.
Vì vậy, giá trị đó tôi sẽ lấy vào đây.
Bây giờ, một khi tôi nắm được ý tưởng của món ăn, sau đó tôi có thể nói,
món ăn này bằng DishService
và lấy món ăn và GetDish sẽ lấy id làm tham số ở đây.
Vì vậy, với điều này, khi tôi nhấp vào một món ăn trong thành phần menu của tôi,
liên kết mà tôi có liên kết router mà tôi đã thiết lập ở đó,
sẽ vượt qua trong id món ăn để Router của tôi như RouterParameter,
và điều đó sẽ trở thành có sẵn cho tôi trong thành
phần DishDetail của tôi bằng cách truy cập vào dịch vụ ActiveDroute ở đây.
Vì vậy, một khi tôi nhận được giữ của nó,
sau đó tôi có thể sử dụng giá trị đó để truy vấn các món ăn ở đây.
Bây giờ, đây không phải là cách hoàn chỉnh để làm việc.
Sau đó trong mô-đun tiếp theo,
chúng ta sẽ sử dụng một cái gì đó gọi là phản ứng JavaScript.
Sau đó, tại thời điểm đó, tôi sẽ trở lại để xác định lại điều này theo
một cách khác để thành phần DishDetail của tôi có thể theo dõi
bất kỳ thay đổi mà tôi thực hiện cho URL của tôi và
tự động thay đổi thông tin đang được hiển thị bởi thành phần này.
Chúng tôi sẽ đi đến điều đó trong một trong những bài tập sau này trong mô-đun tiếp theo,
nhưng điều này hoạt động tốt cho thời điểm này vì vậy chúng tôi sẽ sử dụng điều này.
Ngoài ra, bây giờ khi tôi đi đến các chi tiết của món ăn
tôi muốn có thể trở lại thực đơn từ món ăn.
Vì vậy, tôi sẽ thêm vào một nút trở lại vào thẻ của tôi một nút trở lại vào thẻ của tôi,
mà khi nhấn sẽ đưa tôi trở lại vị trí trước đó trong trình duyệt của tôi.
Vì vậy, để làm điều đó tôi sẽ thêm vào một phương pháp ở đây gọi là GoBack,
mà về cơ bản sẽ làm cho sử
dụng dịch vụ vị trí mà tôi đã bao gồm ở đây.
Dịch vụ Vị trí cung cấp một phương pháp gọi là Quay lại cho phép tôi
quay lại mục trước đó trong lịch sử trình duyệt.
Vì vậy, bằng cách đó, tôi sẽ điều hướng trở lại trình đơn từ các chi tiết ở đây.
Vì vậy, phương pháp GoBack này được thêm vào ở đây.
Bây giờ, chúng ta cần phải đi và sửa chữa thành phần DishDetail ở đây.
Vì vậy, trong tập tin mẫu thành phần DishDetail,
ở đây chúng tôi có hai nút đó là Like và Share nút.
Tôi sẽ thêm vào một nút nữa ở đây.
Đối với nút này, tôi sẽ thêm vào,
nếu nút này được nhấp
vào, điều này sẽ dẫn đến một cuộc gọi đến phương pháp GoBack mà
tôi vừa thêm vào thành phần DishDetail của tôi.
Vì vậy, đây sẽ là một nút Quay lại ở đó.
Trong khi chúng tôi đang ở đó,
chúng tôi cũng có thể sửa chữa các thành phần chân trang liên kết cũng.
Vì vậy, đi đến footercomponent.htmlfile ở dưới cùng ở đây, nơi chúng tôi có liên kết này,
tôi sẽ thêm vào RouterLink ở đây với
tham số nhà cho người đầu tiên,
và sau đó trình đơn cho thứ hai,
và liên hệ với chúng tôi cho thứ ba trong Footer ở đây.
Hãy lưu các thay đổi.
Đi đến ứng dụng của
bạn, nếu bây giờ bạn nhấp vào menu,
các mục menu được hiển thị ở đây.
Nếu chúng ta nhấp vào bất kỳ một trong các mục trình đơn,
bạn sẽ nhận thấy rằng các chi tiết của món ăn được hiển thị trong một cái nhìn riêng biệt ở đây.
Chi tiết này, như bạn có thể thấy,
đây chính xác là những gì các thành phần DishDetail được hiển thị trước đó,
nhưng ở dưới cùng của menu trong thành phần menu,
bây giờ chúng ta có hiển thị trong một chế độ xem riêng biệt.
Bây giờ, thành phần DishDetail này,
bây giờ bạn có thể quay lại trình đơn bằng cách nhấp vào nút Quay lại.
Vì vậy, khi bạn nhấp vào nút Quay lại,
bạn đang trở lại trình đơn.
Khi bạn nhấp vào một mục khác,
bạn sẽ thấy rằng các chi tiết của mục cụ thể đó đang được hiển thị ở đây,
tương tự cho thứ ba quá và sau đó bạn có thể quay trở lại.
Bây giờ, khi bạn nhấp vào bất kỳ một trong những mục này,
lưu ý giá trị của URL trong thanh địa chỉ.
Vì vậy, đây là máy chủ địa phương 4,200 dấu gạch chéo DishDetail 0.
Số không này là id của món ăn này.
Vì vậy, giá trị đó đang được thông qua,
và đó là cách các thành phần DishDetail ở đây đang được hiển thị ở đây, quay trở lại.
Khi bạn nhấp vào mục khác,
bạn có thể thấy rằng bây giờ trong các URL nói, DishDetail dấu gạch chéo 1.
Tương tự như vậy, đối với thứ tư,
nó nói DishDetail slash 3, và như vậy.
Vì vậy, giá trị tham số này là một trong đó chỉ ra cho
các thành phần DishDetail mà món ăn cụ thể
nên được hiển thị bởi các thành phần DishDetail.
Đó là những gì đang được sử dụng bởi các thành phần DishDetail để lấy thông
tin về món ăn cụ thể từ DishService bằng cách sử dụng phương pháp GetDish,
và sau đó thông tin đó đang được hiển thị trong chế độ xem của các thành phần DishDetail.
Vì vậy, bây giờ trong bài tập này,
chúng ta đã học được cách chúng ta có thể sử dụng RouteParameters để truyền thông tin cho một thành phần,
và sau đó các thành phần nhận được quyền truy cập vào các tham số và sau đó sử dụng RouteParameter đó
để quyết định cách nó kết xuất
xem hoặc lấy thông tin và hiển thị các xem cho phù hợp .
Với điều này, chúng tôi hoàn thành bài tập này.
Chúng tôi đã gần như hoàn thành việc xây dựng ứng dụng trang duy nhất của chúng tôi
cho các ứng dụng nhà hàng mà chúng tôi đã làm việc trên cho đến nay.
Đâ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,
Đơn trang ứng dụng phần 2.