Время продолжить наше следующее упражнение, где мы еще раз рассмотрим компоненты.
Мы изменим шаблон для
компонента меню, который мы уже включили в наше угловое приложение
, используя новый вид компонента материала для компоновки нашего меню по-другому.
По пути мы также рассмотрим использование структурной директивы ngIf.
Перейдя к файлу шаблона нашего компонента меню,
Я собираюсь внести некоторые изменения в этот файл шаблона.
Во-первых, я собираюсь добавить еще один div здесь
с fxFlex, а затем закрыть этот div там.
Итак, обратите внимание, что теперь внутри моего внешнего div,
у меня есть два div здесь.
Итак, один с div и второй с пустым списком.
Итак, это два фрагмента контента, которые необходимо выложить на экран.
Но обратите внимание, что я указал fxLayout, который будет окрашен.
Итак, что означает, что эти два фрагмента контента
будут выложены один поверх друг друга,
укладываются друг на друга.
Итак, в первом div
я собираюсь включить немного контента здесь.
Итак, я поставлю еще один div здесь.
Позже я добавлю больше в этот div.
Но на данный момент у меня будет только h3 с пунктом меню,
, а затем добавить элемент горизонтальной линии в это меню.
Таким образом, это даст заголовок для
этой конкретной страницы прямо сверху в моем приложении, когда она будет визуализироваться.
Итак, это одна модификация.
Теперь для второй части
вместо того, чтобы использовать mat-list-item,
Я собираюсь теперь взять помощь mat-grid-list.
Mat-grid-list позволяет мне размещать содержимое как
сетку элементов, а не список элементов.
Мы видели, как меню было выложено со списком пунктов в предыдущем упражнении.
Теперь я хотел бы выложить одно и то же меню по-другому
немного более привлекательный макет для меню.
Итак, вместо использования mat-list,
я собираюсь теперь изменить это из mat-list на mat-grid-list.
Итак, прежде чем я это сделаю,
я также включу это внутри другого div, к которому я буду применять fxFlex здесь,
, чтобы mat-grid-list был сам там.
Таким образом, это даст мне больше гибкости для добавления элементов
в этот конкретный блок, если мне понадобится позже.
Список сетки теперь принимает параметр, называемый
columns, который определяет, сколько столбцов должна содержать эта сетка.
Прямо сейчас я буду указывать столбцы как два, потому что у меня есть только четыре пункта в моем меню.
Таким образом, достаточно двух столбцов.
Так что, по крайней мере, у меня есть два ряда сетки.
Кроме того, это принимает другой параметр, называемый
как rowHeight или атрибут, называемый rowHeight,
, который я укажу, чтобы быть 200 пикселей здесь.
Итак, это завершит список mat-grid-, который у меня есть внутри div.
Теперь, как только я сделаю изменения, затем внутри этого,
я войду и использую,
вместо мат-листа,
это теперь будет матовая решетка здесь.
Итак, решетка плитка.
В основном, плитка сетки.
Эта сетчатка, как вы понимаете,
я буду перебирать список блюд.
Итак, я все еще использую свою директиву ngFor с ней.
Эта матовая решетка теперь будет заключать
содержание, которое будет выложено в каждой плитке моей сетки здесь.
Теперь, внутри плитки,
я собираюсь использовать изображение, как оно существует.
Но я собираюсь использовать изображение,
не с matListAvatar, потому что это не может быть применено здесь, а вместо этого,
я укажу высоту для изображения как 200 пикселей.
Таким образом, это соответствует высоте строки, так что мое изображение будет растягивать
всю высоту моей плитки там.
Таким образом, высота изображения, 200 пикселей,
и источник и альт останутся таковыми.
Затем, следующая часть,
вместо h1,
Я собираюсь изменить этот
быть
заключены внутри мато-сетка-плиточного нижнего колонтитула.
Таким образом, независимо от содержания здесь будет появляться внутри нижнего колонтитула mat-grid-tile-footer здесь.
Теперь, внутри я могу указать любой контент, который я хочу.
Итак, для сетки плитки,
учитывая полное описание немного слишком много.
Итак, я собираюсь удалить это описание
и вместо этого использовать только h1 там.
Теперь, кроме того, я собираюсь воспользоваться помощью угловой трубы здесь.
Труба, которую я собираюсь применить к этому, как вы можете видеть,
труба является вертикальной панелью на клавиатуре.
Тогда я буду использовать прописную трубу.
Итак, что делает эта труба?
Эта труба, прописная труба, преобразует название блюда из
, что бы оно ни было, в целое слово с прописными буквами.
Итак, независимо от названия блюда будет отображаться как
полностью прописные буквы, когда он отображается на шаблоне там.
Так вот, здесь используется угловая труба.
Итак, мы будем использовать больше угловых труб, как мы идем вдоль.
Это наша первая встреча с одной из встроенных угловых труб в этом курсе.
Итак, с этим, мы теперь изменили наш макет
, чтобы показать этот div здесь, а затем этот список сетки здесь.
Давайте сохраним изменения.
Перейдя сейчас к файлу app.module.ts,
нам нужно импортировать MatGridListModule там.
Итак, идя наверх там, мы скажем
«Импорт MatGridListModule из угловой/материала/сетки/списка».
После того, как мы добавили это,
, то мы перейдем к импорту в декораторе,
, а затем включим MatGridListModule во входы.
Давайте, опять же, сохраним изменения.
Давайте быстро посмотрим на нашу веб-страницу и как она выглядит на экране.
Перейдя на нашу веб-страницу
, вы можете видеть, что ваше меню теперь выложено по-другому.
Хотя, это не очень здорово смотреть на данный момент.
Я не дизайнер,
так что это лучшее, что я мог получить от него.
Теперь, если бы у меня было 20 пунктов в моем меню,
то я мог бы выложить несколько пунктов на каждой строке и несколько столбцов,
, а затем я мог бы сжать пространство, которое занимает каждый пункт,
или я могу увеличить размер изображения так, чтобы он
занимает все, пока он не будет выглядеть гораздо более привлекательным на экране.
Теперь давайте посмотрим на то же самое, когда оно просматривается на экране меньшего устройства.
Итак, вот где я собираюсь воспользоваться помощью
вариантов разработчика в моем браузере Chrome.
Итак, я начну с инструментов разработки здесь.
Когда у меня есть инструменты разработки здесь,
вы можете увидеть эту кнопку здесь с надписью «Переключить панель инструментов устройства».
Итак, позвольте мне переключиться назад.
Тогда вы можете увидеть одну и ту же страницу, отображаемую на разных размерах экрана.
Итак, здесь вы видите страницу, отображаемую в Galaxy S5,
, а затем то же самое
вы можете видеть, что она визуализируется в ландшафтном режиме.
Итак, вы можете видеть, что это позволяет мне просматривать одну и ту же страницу
на разных размерах экрана, используя встроенные инструменты разработчика в Android.
Итак, давайте посмотрим, как это выглядит на iPhone.
Меню выглядит здесь гораздо привлекательнее.
Это то, чего я хотел бы достичь на экране.
Если бы мои изображения были гораздо больше по размеру даже на экранах с высоким разрешением,
меню выглядело бы так.
В ландшафтном режиме это то, как он будет выглядеть.
Теперь обратите внимание на эти инструменты разработчика в Chrome.
Мы будем использовать инструменты разработчика позже, когда мы будем использовать Angular в
более подробно, потому что мы можем изучить такие вещи, как Angular
может напечатать для нас на консоли.
Тогда мы можем даже изучить, как различные части нашего приложения извлекаются.
Мы можем посмотреть на производительность сети нашего приложения и так далее.
Итак, вот где эти инструменты разработчика дополнение очень,
очень полезно для нас.
Возвращаясь к обычному пути,
это то, как выглядит наша веб-страница в стандартном настольном браузере.
Мы еще не закончили.
Вернемся к компонентам меню.
Typescript файл, а затем эти блюда, которые я определил здесь, вместо того, чтобы держать это внутри моего класса,
Я собираюсь переместить эти блюда в константу, которую я
определяю прямо там, и мы назовем его как констант блюда,
и это будет типа блюдо массив,
, а затем я
вырежет весь этот набор посуды отсюда, а затем переместит его туда.
Это готовится к будущему упражнению, где мы собираемся
не включать такого рода данные в наше приложение,
, но вместо этого мы будем перемещать это в службу.
Итак, то, что я сделал, это вырезать информацию о блюдах и
затем положить его в константу здесь с названием блюда во всех столицах здесь,
, а затем теперь мои блюда остаются сиротой здесь.
Итак, это я собираюсь сделать его равным блюдам здесь.
Теперь, вы должны удивляться, как так получилось, что я удалил тип для посуды.
TypeScript достаточно умный, чтобы понять, что когда вы это сделаете,
он автоматически назначит тип блюд, чтобы соответствовать тому, что у вас есть в блюдах.
Итак, даже если вы не напечатаете его в TypeScript, сделает это,
, но если вы хотите быть полностью ясным, вы
также можете это сделать, и это будет работать так же хорошо.
Хорошо, если вы предпочитаете, это оставит его как таковое.
Теперь, кроме того, я собираюсь ввести еще одну переменную здесь называется selectedDish.
Эту переменную я буду использовать в этом упражнении и в одном из последующих упражнений.
Итак, я собираюсь сделать это равным первому блюду в моем массиве.
Теперь это избранное блюдо будет полезно для следующей части этого упражнения.
Итак, давайте сохраним изменения, а затем вернемся к нашему шаблону.
В шаблоне, то, что я собираюсь сделать, это прямо под меню,
Я собираюсь использовать элемент карты от углового материала до
отобразить этот selectedDish прямо под меню там.
Теперь, хотя это не лучший способ сделать это,
но это я делаю в рамках подготовки к следующему упражнению, чтобы
проиллюстрировать вам, как элемент материальной карты может быть использован для нашего приложения.
Итак, я собираюсь использовать div с fx flex здесь,
, а затем к этому div я собираюсь добавить в
ngIf с selectedDish.
Итак, обратите внимание, что я применяю ngIf к этому div здесь, чтобы
указать, что если selectedDish в настоящее время null,
, тогда я не буду добавлять этот div в dom.
Если нет,
то этот div будет добавлен в dom,
и отобразит элемент карты с содержимым в If.
Итак, я собираюсь использовать элемент карты для отображения деталей selectedDish.
Итак, чтобы сделать это,
я использую коврик-карту здесь из материала дизайн карты здесь.
Сама матовая карта имеет
часть заголовка матовой карты
, а также вместе с матовой карточкой,
она будет иметь содержимое матовой карты.
Позвольте мне закрыть содержимое матовой карты.
Итак, в заголовке, что я хочу показать в заголовке?
В заголовке я хочу использовать
mat-card-title, чтобы показать
детали названия selectedDish здесь.
Итак, я бы пошел и сказал h3 и закрыть h3 и внутри здесь я собираюсь
использовать интерполяцию, а затем сказать
selectedDish имя и трубы в верхнем регистре.
Итак, обратите внимание, как я включил имя selectedDish, используя мат card-title.
Теперь, кроме того, я собираюсь использовать метод
один называется изображение, которое принимает атрибут под названием mat-card-image и
источник будет, как вы ожидали,
это должно быть selectedDish.image и
, то альтернатива, которую я собираюсь
дать как selectedDish.name.
Итак, это будет изображение, которое будет включено в мою карту здесь.
Итак, в содержании
я собираюсь включить selectedDish описание,
, а затем вместе с содержимым здесь,
я также могу добавить в некоторые кнопки в нижней части карты.
Итак, я буду использовать mat-card-действия здесь и внутри
там я могу включить кнопку.
Итак, вы видите, что это использование кнопки
в моем приложении, две кнопки.
Обратите внимание на использование этой кнопки коврика здесь.
Таким образом, это превратит эту кнопку в материальный дизайн, как кнопка здесь,
и так, эти две кнопки появятся внизу моей карты здесь.
Итак, с этим, я добавил в детали выбранного блюдо.
У меня есть причина для этого.
Я показываю вам, как вы можете отобразить детали в карточке,
ну, это в подготовке к вашему первому заданию.
Итак, вы можете увидеть, как мы можем использовать карточку дизайна материала в нашем шаблоне здесь.
Переходя к @module .ts, нам нужно импортировать карту и модуль кнопки.
Итак, поднимаясь вверх, мы скажем, импортировать MatCardModule из
угловой карты материала и
импортировать MatButtonModule из угловой кнопки материала.
Теперь, когда мы добавили эти два в верхней части,
давайте перейдем к декоратору,
и в импорте давайте добавим в MatCardModule и MatPatternModule.
Итак, давайте сохраним изменения, а затем быстро взглянем на нашу веб-страницу.
Взгляните на наше угловое приложение в браузере,
вы теперь видите, что у нас есть меню отображается
здесь, а затем внизу у нас теперь есть элемент карты.
Итак, здесь вы можете увидеть элемент карты с заголовком там и изображением там.
Конечно, изображение выглядит ужасно, потому что это
фактический размер изображения, который я дал вам настолько
мал, и он был расширен, чтобы заполнить весь экран.
Посмотри на дно здесь. Итак, это
содержит описание изображения, а затем две кнопки здесь,
прямо ниже.
Итак, вот как матовая кнопка стилирует кнопки в угловом шаблоне,
так что вам нравится и кнопка поделиться.
Конечно, они ничего не делают,
но обратите внимание на материальный дизайн, как поведение там.
Итак, когда вы нажимаете на кнопку,
вы можете увидеть рябь, идущие через.
Вот почему я решил использовать модуль углового материала
для разработки шаблонов в этом курсе.
Итак, взгляните на него на меньшем устройстве,
он выглядит гораздо привлекательнее на меньшем устройстве.
Итак, вы можете видеть, что рендеринг намного лучше на меньшем устройстве,
вы можете видеть, что на экране вы можете увидеть
карту прямо там, где показаны детали и две кнопки там,
like и кнопка поделиться,
и детали блюда.
Итак, это завершает это упражнение.
Итак, в этом упражнении
мы изучили использование списка сетки и
компонентов дизайна материалов карты для разработки шаблона для нашего компонента меню.
Это может быть подходящее время для вас, чтобы сделать хороший комментарий с сообщением
Угловые компоненты часть вторая.