Thời gian để tiếp tục với bài tập tiếp theo của chúng tôi, nơi chúng tôi sẽ kiểm tra các thành phần một lần nữa.
Chúng tôi sẽ sửa đổi mẫu cho
thành phần menu mà chúng tôi đã đưa vào ứng dụng Angular của chúng tôi
bằng cách sử dụng một loại thành phần vật liệu mới để bố trí menu của chúng tôi theo một cách khác.
Trên đường đi, chúng ta cũng sẽ xem xét việc sử dụng chỉ thị cấu trúc NGIf.
Đi đến tập tin mẫu của thành phần menu của chúng
tôi, tôi sẽ thực hiện một số thay đổi đối với tập tin mẫu này.
Đầu tiên, tôi sẽ thêm vào một div ở đây
với FXFlex và sau đó đóng div đó ở đó.
Vì vậy, chú ý rằng bây giờ bên trong div bên ngoài của
tôi, Tôi có hai divs đây.
Vì vậy, một với div và một trong những thứ hai với danh sách trống.
Vì vậy, đây là hai phần nội dung cần được đặt ra trên màn hình.
Nhưng lưu ý rằng tôi đã chỉ định FXLayout được tô màu.
Vì vậy, có nghĩa là, hai phần
nội dung này sẽ được đặt ra một trên đầu trang của nhau,
xếp chồng lên nhau một trên đầu trang của nhau.
Vì vậy, trong div đầu tiên,
tôi sẽ bao gồm một chút nội dung ở đây.
Vì vậy, tôi sẽ đặt một div bên trong đây.
Sau đó, tôi sẽ thêm nhiều vào div này.
Nhưng đối với thời điểm này, tôi sẽ chỉ có một h3 với mục menu ở đó,
và sau đó thêm một phần tử đường ngang vào menu này.
Vì vậy, điều này sẽ cung cấp cho tiêu đề cho
trang đặc biệt này ngay trên đầu trang trong ứng dụng của tôi khi nó được render.
Vì vậy, đó là một sửa đổi.
Bây giờ cho phần thứ hai,
thay vì sử dụng mat-list-item,
bây giờ tôi sẽ lấy sự giúp đỡ của một mat-lưới danh sách.
Mat-lưới danh sách cho phép tôi bố trí nội dung dưới dạng
lưới các mục chứ không phải là danh sách các mục.
Chúng tôi đã thấy cách trình đơn được đặt ra với danh sách các mục trong bài tập trước đó.
Bây giờ, tôi muốn bố trí cùng một menu theo một cách khác một
chút bố trí hấp dẫn hơn cho menu.
Vì vậy, thay vì sử dụng danh sách mat-list,
bây giờ tôi sẽ thay đổi điều này từ mat-list để một mat-grid-list.
Vì vậy, trước khi tôi làm điều đó,
tôi cũng sẽ kèm theo này bên trong một div mà tôi sẽ áp dụng FXFlex ở đây,
do đó mat-lưới danh sách là trong riêng của mình có.
Vì vậy, điều đó sẽ cho tôi linh hoạt hơn
để thêm các mục vào đơn vị đặc biệt này nếu tôi cần sau này.
Danh sách lưới bây giờ có một tham số được gọi là
cột xác định bao nhiêu cột lưới này nên chứa.
Ngay bây giờ tôi sẽ chỉ định các cột là hai bởi vì tôi chỉ có bốn mục trong menu của tôi.
Vì vậy, hai cột là đủ.
Vì vậy, ít nhất tôi có hai hàng của lưới điện ở đó.
Ngoài ra, điều này có một tham số khác được
gọi là RowhEight hoặc một thuộc tính được gọi là RowhEight,
mà tôi sẽ chỉ định là 200 pixel ở đây.
Vì vậy, đó sẽ hoàn thành mat-lưới danh sách mà tôi có bên trong div có.
Bây giờ, một khi tôi thực hiện sự thay đổi, sau đó bên
trong nó, tôi sẽ đi vào và sử dụng,
thay vì danh sách mat-list,
bây giờ nó sẽ là một mat-grid-tile ở đây.
Vì vậy, ngói lưới.
Về cơ bản, gạch của lưới điện.
Ngói lưới này, như bạn nhận ra,
tôi sẽ lặp lại danh sách các món ăn.
Vì vậy, tôi vẫn đang sử dụng chỉ thị ngFor của tôi với nó.
Đây mat-lưới gạch bây giờ sẽ kèm theo
nội dung sẽ được đặt ra trong mỗi ngói của lưới điện của tôi ở đây.
Bây giờ, bên trong gạch,
tôi sẽ sử dụng hình ảnh như nó tồn tại.
Nhưng tôi sẽ sử dụng hình ảnh,
không phải với MatlistaVatar bởi vì điều đó không thể được áp dụng ở đây, và thay vào đó,
tôi sẽ chỉ định chiều cao cho hình ảnh là 200 pixel.
Vì vậy, điều này phù hợp với chiều cao hàng để hình ảnh của tôi sẽ kéo dài
toàn bộ chiều cao của gạch của tôi ở đó.
Vì vậy, chiều cao hình ảnh, 200 pixel,
và nguồn và alt sẽ vẫn như vậy.
Sau đó, phần tiếp theo,
thay vì h1,
tôi sẽ thay đổi cái này
để được
kèm theo bên trong mat-grid-tile-footer.
Vì vậy, bất cứ nội dung nào bên trong ở đây sẽ xuất hiện bên trong mat-grid-tile-footer ở đây.
Bây giờ, bên trong đó tôi có thể xác định bất cứ nội dung nào tôi muốn.
Vì vậy, đối với ngói lưới,
đưa ra mô tả đầy đủ là một chút quá nhiều.
Vì vậy, tôi sẽ loại bỏ mô tả này,
và thay vào đó, chỉ sử dụng h1 ở đó.
Bây giờ, ngoài ra, tôi sẽ lấy sự giúp đỡ của một đường ống góc ở đây.
Các đường ống mà tôi sẽ áp dụng cho điều này, như bạn có thể thấy,
đường ống là thanh dọc trên bàn phím của bạn.
Sau đó, tôi sẽ sử dụng ống chữ hoa.
Vì vậy, ống dẫn này làm gì?
Ống này, ống chữ hoa sẽ biến đổi tên món ăn từ
bất cứ điều gì nó là thành toàn bộ từ với chữ hoa.
Vì vậy, bất cứ điều gì tên món ăn sẽ được hiển thị như
chữ hoa hoàn toàn khi nó được hiển thị vào mẫu đó.
Vì vậy, đó là việc sử dụng một đường ống góc cạnh ở đây.
Vì vậy, chúng ta sẽ sử dụng nhiều ống góc hơn khi chúng ta đi cùng.
Đây là cuộc gặp gỡ đầu tiên của chúng tôi với một trong những đường ống góc được xây dựng trong khóa học này.
Vì vậy, với điều này, bây giờ chúng tôi đã sửa đổi bố trí của chúng tôi
để hiển thị div này ở đây và sau đó danh sách lưới này ở đây.
Hãy lưu các thay đổi.
Đi bây giờ đến tập tin app.module.t,
chúng ta cần nhập MatgridListModule trong đó.
Vì vậy, đi đến trên cùng có, chúng ta sẽ nói,
“Nhập MatgridListModule từ góc độ/vật lước/danh sách.”
Một khi chúng tôi đã thêm điều này,
sau đó chúng tôi sẽ đi xuống nhập khẩu trong trang trí,
và sau đó bao gồm MatGridListModule vào các đầu vào.
Hãy, một lần nữa, lưu các thay đổi.
Chúng ta hãy đi và xem nhanh trang web của chúng tôi và nó trông như thế nào trên màn hình. Vào
trang web của chúng tôi,
bây giờ bạn có thể thấy rằng thực đơn của bạn bây giờ được bố trí theo một cách khác.
Mặc dù, nó không phải là thực sự tuyệt vời nhìn vào thời điểm này.
Tôi không phải là nhà thiết kế,
vì vậy đó là điều tốt nhất mà tôi có thể nhận được từ nó.
Bây giờ, nếu tôi có 20 mục trong menu của tôi,
sau đó tôi có thể đặt ra nhiều mục trên mỗi hàng và nhiều cột,
và sau đó tôi có thể nén không gian mà mỗi mục chiếm,
hoặc tôi có thể tăng kích thước của hình ảnh để nó
chiếm toàn bộ điều cho đến khi nó sẽ trông hấp dẫn hơn nhiều trên màn hình.
Bây giờ, chúng ta hãy nhìn vào điều tương tự này khi nó được xem trong màn hình của một thiết bị nhỏ hơn.
Vì vậy, đây là nơi tôi sẽ lấy sự trợ giúp của các
tùy chọn nhà phát triển trong trình duyệt Chrome của tôi.
Vì vậy, tôi sẽ bắt đầu từ các công cụ phát triển ở đây.
Khi tôi có các công cụ phát triển ở đây,
bạn có thể thấy nút này ở đây nói, “Chuyển đổi thanh công cụ thiết bị.”
Vì vậy, để tôi quay lại.
Sau đó, bạn có thể thấy cùng một trang được hiển thị trên các kích cỡ màn hình khác nhau.
Vì vậy, ở đây, bạn thấy trang được hiển thị trong một Galaxy S5,
và sau đó cùng một điều
bạn có thể thấy nó được hiển thị trong chế độ phong cảnh.
Vì vậy, bạn có thể thấy rằng điều này cho phép tôi xem cùng một trang
trên các kích thước màn hình khác nhau bằng cách sử dụng các công cụ phát triển tích hợp trong Android.
Vì vậy, chúng ta hãy xem nó trông như thế nào trên iPhone.
Thực đơn trông hấp dẫn hơn nhiều ở đây.
Đây là những gì tôi muốn đạt được trên màn hình.
Nếu hình ảnh của tôi có kích thước lớn hơn nhiều ngay cả trên màn hình độ phân giải cao hơn,
trình đơn sẽ trông như thế này.
Trong chế độ phong cảnh, đây là những gì nó sẽ trông như thế nào.
Bây giờ, hãy lưu ý các công cụ nhà phát triển này trong Chrome.
Chúng tôi sẽ sử dụng các công cụ phát triển sau này khi chúng tôi sử dụng Angular
chi tiết hơn bởi vì chúng tôi có thể kiểm tra những thứ như những gì Angular
có thể in cho chúng tôi trên giao diện điều khiển.
Sau đó, chúng tôi thậm chí có thể kiểm tra như thế nào các phần khác nhau của ứng dụng của chúng tôi đang được lấy.
Chúng ta có thể xem xét hiệu suất mạng của ứng dụng của chúng tôi, v.v.
Vì vậy, đó là nơi mà các công cụ phát triển bổ sung là rất,
rất hữu ích cho chúng tôi.
Chuyển về cách bình thường,
đây là trang web của chúng tôi trông như thế nào trên trình duyệt máy tính để bàn chuẩn.
Chúng ta vẫn chưa xong.
Hãy quay trở lại các thành phần menu.
Typescript tập tin và sau đó món ăn này mà tôi đã
định nghĩa ở đây thay vì giữ điều này bên trong lớp của tôi,
Tôi sẽ di chuyển món ăn này vào một hằng số mà tôi
sẽ xác định ngay trên đó và chúng tôi sẽ đặt tên nó như món ăn const,
và điều này sẽ là loại món ăn một mảng,
và sau đó tôi sẽ cắt toàn bộ các món ăn từ đây và sau đó di chuyển nó lên đó.
Điều này là
để chuẩn bị cho một bài tập trong tương lai, nơi chúng tôi sẽ không bao gồm loại dữ liệu này trong ứng dụng của chúng tôi,
nhưng thay vào đó chúng tôi sẽ di chuyển điều này vào một dịch vụ.
Vì vậy, những gì tôi đã làm là cắt thông tin món ăn và
sau đó đặt nó vào một hằng số ở đây với các món ăn tên trong tất cả các thủ đô ở đây,
và sau đó bây giờ món ăn của tôi được để lại như một đứa trẻ mồ côi ở đây.
Vì vậy, điều này tôi sẽ làm cho nó tương đương với các món ăn ở đây.
Bây giờ, các bạn phải tự hỏi tại sao tôi đã loại bỏ các loại cho các món ăn.
TypeScript đủ thông minh để nhận ra rằng khi bạn làm điều này,
nó sẽ tự động gán loại cho các món ăn để phù hợp với những gì bạn có trong các món ăn.
Vì vậy, ngay cả khi bạn không gõ nó trong TypeScript sẽ làm điều đó,
nhưng nếu bạn muốn hoàn toàn rõ ràng bạn
có thể làm điều này quá và điều đó sẽ làm việc tốt.
Được rồi, nếu bạn thích điều này sẽ để nó như vậy.
Bây giờ, ngoài ra, tôi sẽ giới thiệu thêm một biến ở đây gọi là SelectedDish.
Biến này tôi sẽ sử dụng trong bài tập này và một trong những bài tập sau này cũng.
Vì vậy, tôi sẽ làm cho điều này bằng với món ăn đầu tiên trong mảng của tôi.
Bây giờ, món ăn được lựa chọn này sẽ hữu ích cho phần tiếp theo của bài tập này.
Vì vậy, chúng ta hãy lưu các thay đổi và sau đó di chuyển trở lại mẫu của chúng tôi.
Trong mẫu, những gì tôi sẽ làm là ngay bên dưới menu,
tôi sẽ sử dụng một phần tử thẻ từ vật liệu góc để
hiển thị này được lựa chọn Dish ngay bên dưới menu ở đó.
Bây giờ, mặc dù đây không phải là cách tốt nhất để làm điều đó,
nhưng điều này tôi đang làm để chuẩn bị cho bài tập tiếp theo chỉ để
minh họa cho bạn làm thế nào một yếu tố thẻ vật liệu có thể được sử dụng cho ứng dụng của chúng tôi.
Vì vậy, tôi sẽ sử dụng một div với một flex fx ở đây,
và sau đó để div này tôi sẽ thêm vào
một NGIf với SelectedDish.
Vì vậy, lưu ý rằng tôi đang áp dụng một NGIf để div này ở đây để
xác định rằng nếu SelectedDish hiện là null,
sau đó tôi sẽ không thêm div này vào dom.
Nếu nó không phải là,
sau đó div này sẽ được thêm vào dom,
và sẽ hiển thị các yếu tố thẻ với nội dung trong If.
Vì vậy, tôi sẽ sử dụng một yếu tố thẻ để hiển thị các chi tiết của SelectedDish.
Vì vậy, để làm điều đó,
tôi sử dụng một thẻ mat-card ở đây từ thẻ thiết kế vật liệu ở đây.
Các mat-card chính nó có
một phần tiêu đề mat-card
và cũng cùng với mat-card-header,
nó sẽ có một mat-card-content.
Hãy để tôi kết thúc nội dung của thẻ mat-card đó.
Vì vậy, trong tiêu đề, tôi muốn hiển thị những gì trong tiêu đề?
Trong tiêu đề, tôi muốn sử dụng
một tiêu đề mat-card-title để hiển thị
các chi tiết của tên của SelectedDish ở đây.
Vì vậy, tôi sẽ đi vào và nói h3 và đóng h3 và bên trong ở đây tôi sẽ
sử dụng nội suy và sau đó nói
tên được chọn Dish và chữ hoa ống.
Vì vậy, lưu ý làm thế nào tôi đã bao gồm tên của SelectedDish sử dụng tiêu đề mat-card-title.
Bây giờ, ngoài ra, tôi sẽ sử dụng một phương pháp,
một phương pháp được gọi là hình ảnh trong đó có một thuộc tính gọi là mat-card-image và
nguồn sẽ như bạn mong đợi,
điều này nên được chọn Dish.Image và
sau đó thay thế tôi sẽ
cung cấp cho như SelectedDish.Name.
Vì vậy, đây sẽ là hình ảnh sẽ được bao gồm trong thẻ của tôi ở đây.
Vì vậy, trong nội dung,
tôi sẽ bao gồm mô tả SelectedDish,
và sau đó cùng với nội dung ở đây,
tôi cũng có thể thêm vào một số nút vào dưới cùng của thẻ.
Vì vậy, tôi sẽ sử dụng mat-card-action ở đây và bên trong
đó tôi có thể bao gồm một nút.
Vì vậy, bạn thấy rằng đây là việc sử dụng một nút
trong ứng dụng của tôi, hai nút.
Chú ý việc sử dụng nút mat-này ở đây.
Vì vậy, điều này sẽ biến nút này thành một thiết kế vật liệu như nút ở đây,
và như vậy, hai nút này sẽ xuất hiện ở dưới cùng của thẻ của tôi ở đây.
Vì vậy, với điều này, tôi đã thêm vào trong các chi tiết của SelectedDish.
Có lý do để tôi làm việc này.
Tôi đang cho bạn thấy làm thế nào bạn có thể hiển thị các chi tiết trong một thẻ,
tốt, đây là để chuẩn bị cho nhiệm vụ đầu tiên của bạn.
Vì vậy, bạn có thể thấy làm thế nào chúng ta có thể sử dụng một thẻ thiết kế vật liệu trong mẫu của chúng tôi ở đây.
Đi đến @module .t, chúng ta cần nhập thẻ và mô-đun nút.
Vì vậy, đi lên đến đầu chúng ta sẽ nói nhập khẩu MatcardModule từ
thẻ vật liệu góc cạnh và
nhập khẩu MatButtonModule từ nút vật liệu góc cạnh.
Bây giờ chúng ta đã thêm hai vào đầu trang, chúng
ta hãy đi đến trang trí,
và trong nhập khẩu chúng ta hãy thêm vào MatcardModule và MatPatternModule.
Vì vậy, chúng ta hãy lưu các thay đổi và sau đó xem nhanh trang web của chúng tôi.
Hãy nhìn vào ứng dụng góc cạnh của chúng tôi trong trình duyệt,
bây giờ bạn thấy rằng chúng tôi có trình đơn được hiển thị
ở đây và sau đó ở phía dưới chúng tôi bây giờ có một phần tử thẻ.
Vì vậy, bạn có thể thấy các yếu tố thẻ ở đây với tiêu đề ở đó và hình ảnh ở đó.
Tất nhiên, hình ảnh trông khủng khiếp bởi vì nó là
kích thước hình ảnh thực tế mà tôi đã cung cấp cho bạn là quá
nhỏ và nó đã được mở rộng để lấp đầy toàn bộ màn hình.
Nhìn phía dưới này xem. Vì vậy, điều này
chứa mô tả của hình ảnh và sau đó là hai nút ở đây,
ngay dưới đây.
Vì vậy, đây là cách mat-nút phong cách các nút trong một mẫu góc,
vì vậy bạn có thích và nút chia sẻ.
Tất nhiên, họ không làm bất cứ điều gì,
nhưng lưu ý thiết kế vật liệu như hành vi ở đó.
Vì vậy, khi bạn nhấp vào nút,
bạn có thể thấy các gợn sóng đi qua.
Vì vậy, đó là lý do tại sao tôi quyết
định sử dụng mô-đun vật liệu góc để thiết kế các mẫu trong khóa học này.
Vì vậy, nhìn vào nó trên một thiết bị nhỏ hơn,
nó trông hấp dẫn hơn nhiều trên một thiết bị nhỏ hơn.
Vì vậy, bạn có thể thấy rằng việc kết xuất là tốt hơn nhiều trên một thiết bị nhỏ hơn,
bạn có thể thấy rằng trên màn hình bạn
có thể thấy thẻ ngay tại đó hiển thị các chi tiết và hai nút ở đó,
như thế và nút chia sẻ,
và các chi tiết của món ăn.
Vì vậy, điều đó hoàn thành bài tập này.
Vì vậy, trong bài tập này,
chúng tôi đã kiểm tra việc sử dụng danh sách lưới và
các thành phần thiết kế vật liệu thẻ để thiết kế mẫu cho thành phần menu của chúng tôi.
Đây có thể là thời điểm tốt cho bạn để làm một bình luận tốt với thông điệp, các
thành phần góc phần hai.