Прежде чем приступить к работе с угловым шаблоном форм,
нам нужно найти способ наложения контента поверх текущего веб-представления.
Bootstrap, у нас есть модели, которые позволяют нам накладывать контент на верхней части веб-страницы.
С использованием углового материала в нашем угловом приложении
Угловой материал предоставляет компонент под названием
компонент углового диалога, который позволяет
накладывать содержимое поверх текущего представления.
Давайте рассмотрим, как мы используем компонент диалога в этом упражнении.
Чтобы начать это упражнение,
давайте перейдем к нашему коду, и нам нужно найти
способ запуска приложения, чтобы показать диалог.
Итак, чтобы сделать это, давайте добавим кнопку в нашу панель инструментов здесь.
Итак, перейдя на панель инструментов прямо в верхней части здесь,
позвольте мне добавить пролет с классом flex spacer, который мы
ввели в наш SCSS
файл для нашего приложения.
Итак, мы ввели flexor spacer в файле styles.scss здесь,
прямо ниже.
Итак, это класс, который мы будем использовать с промежутком здесь.
Итак, когда вы применяете flexor span к пролету,
то, что он делает, это обеспечивает достаточное пространство между
предыдущим элементом и элементом, который следует здесь.
Таким образом, он будет нажимать любой элемент, который следует за span, до
крайнего правого края экрана, насколько это возможно.
Итак, вот, после этого,
позвольте мне добавить кнопку здесь.
Итак, эта кнопка, которая при нажатии будет
вызывать функцию openLoginForms.
Итак, как вы понимаете,
вот где мы будем поддерживать форму для нашего заявления.
Рассмотрим, как будет разработана форма в следующем упражнении.
Теперь, для этого, позвольте мне добавить в
соответствующий шрифт удивительные иконки.
Итак, я скажу fa fa-signin,
, а также добавить в fa-lg к этому.
Итак, что добавит в иконку,
знак в иконке здесь,
, а затем после этого,
мы поместим слово логин там.
Таким образом, это создаст кнопку под названием login в панели инструментов
к правому краю экрана вместе со значком входа там,
, который при нажатии откроет форму входа.
Сама эта форма входа будет размещена внутри компонента диалога материалов.
Теперь, чтобы создать компонент диалога, очевидно,
мы понимаем, что это будет компонент, который
нужно наложить поверх текущего взгляда там.
Таким образом, нам нужен еще один компонент, который будет добавлен в наше приложение.
Итак, давайте перейдем к терминалу, а затем добавим еще один компонент в наше приложение.
Перейдя в терминал, позвольте мне ввести логин компонента ng.
Итак, мы добавили новый компонент, называемый как компонент входа в наше приложение.
После того, как компонент входа будет добавлен,
пойдем и сконфигурируем компонент входа в качестве компонента диалога в нашем приложении.
Итак, чтобы сделать это, давайте вернемся к нашему кодексу.
Возвращаясь к нашему коду,
мы видим, что компонент входа теперь открыт.
Позвольте мне открыть файл component.ts для входа.
Итак, настройте это как
компонент диалога в угловом приложении, используя компонент диалога материала.
Позвольте мне импортировать MatDialog.
Итак, это компонент, который поддерживает
компонент диалога в угловом материале, а затем
позвольте мне импортировать MatDialogRef и они импортируются
из углового материала здесь.
Это позволит нам создать наш компонент и превратить его в компонент диалога.
Теперь, после этого, давайте продолжим, а затем настроим наш файл шаблона здесь.
Итак, перейдя к файлу шаблона здесь,
Я собираюсь создать это как сказать mat-toolbar.
Итак, в рамках этого диалога также будет отображаться панель инструментов.
Для этой панели инструментов, я скажу логин прямо вверху, после чего,
мы представим класс flex spacer
здесь, а затем после класса flex spacer,
мы добавим в кнопку
с атрибутами mat-button mat-dialog-close.
Итак, этот mat-dialog-close является то, что диалоговые компоненты поддерживают для нас,
этот атрибут, который превращает эту кнопку в
кнопку, которая при нажатии будет закрывать этот диалог там.
Внутри этой кнопки я собираюсь использовать время там.
Итак, это отобразит его в виде креста на экране.
Итак, вот кнопка, которую мы добавим в диалог.
Сейчас наш диалог содержит только это, по его мнению.
Теперь, чтобы включить компонент диалога и использовать его,
конечно, нам нужно перейти к модулю приложения.
В модуле приложения
нам нужно импортировать соответствующий модуль, который поддерживает компонент диалога.
Итак, мы импортируем MatDialogueModule
из диалогового окна «Угловой материал».
Таким образом, это добавит в модуль диалога в наше приложение, а затем, как вы ожидаете,
им придется спуститься сюда в импорт, а затем импортировать
, что модуль диалога в наше приложение.
Не только это, теперь
для того, чтобы превратить угловой компонент в компонент диалога,
мы также должны объявить этот компонент как компонент входа.
Теперь напомним, что мы добавили в компонент входа в наше приложение и поэтому
этот логин компонент уже добавлен там и
затем также включен в декларации.
Теперь, если вы хотите использовать это как наложение с компонентом диалога материала,
нам также нужно включить это в другое свойство, называемое как компоненты ввода
в нашем декораторе модуля ng здесь.
Итак, внутри этих компонентов записи
мне также нужно включить компонент входа здесь.
Теперь это позволит нам использовать
компонент входа в качестве наложения поверх текущего экрана.
Итак, как только мы обновили компонент Angular материала,
сейчас, мы должны иметь возможность активировать этот компонент входа.
Теперь мы добавили в кнопку в
компонент заголовка, а затем здесь мы имеем эту функцию под названием open login form.
Таким образом, это должно вызвать показ диалога.
Итак, входя в файл заголовка component.ts,
, чтобы использовать компонент диалога мат в компоненте заголовка,
позвольте мне импортировать MatDialog, а затем
MatDialogRef из углового материала.
Внутри этой функции, в конструкторе,
позвольте мне ввести
диалог как MatDialog.
Таким образом, это сервис, который позволяет нам открыть компонент как компонент диалога.
Теперь, как это работает?
Итак, здесь нам нужно добавить в эту функцию openLoginForm,
которая при вызове должна вызывать отображение компонента диалога.
Итак, для этого, мы скажем, этот диалог,
и этот диалог поддерживает функцию под названием
открыт, к которой мы поставляем компонент, который собирается
действовать в качестве представления для диалога, который накладывается поверх текущего веб-представления.
Итак, здесь, как мы понимаем,
мы объявили компонент входа в качестве компонента диалога.
Итак, мы вызовем компонент входа
, а затем также будем указывать размер для диалога.
Если вы хотите,
вы можете разрешить отображение размера по умолчанию,
, но вы также можете настроить размер явно, если хотите.
Итак, в этом случае
позвольте мне настроить ширину и высоту этого диалога.
Вам не обязательно это делать, если вы этого не сделаете,
тогда диалог будет показан в стандартном размере по умолчанию здесь.
Итак, с этим, мой компонент заголовка
теперь настроен таким образом, что при вызове открытой формы входа в систему
это позволит нам открыть
компонент входа в качестве диалога, а затем показать его поверх текущей строки.
Итак, давайте сохраним все изменения, а затем пойдем и посмотрим
на наше приложение в браузере.
Перейдя в браузер, вы увидите, что в правом краю экрана
у нас есть еще одна новая кнопка здесь называется кнопка входа,
и увидеть, что знак в шрифте удивительный значок, добавленный к этому.
Теперь, когда вы нажмете на кнопку входа,
вы сразу увидите диалоговое окно на экране.
Опять же, вы можете отклонить это, щелкнув в любом месте экрана за пределами
диалога или вы нажимаете на это, а затем диалог всплывает на экране.
Итак, из Bootstrap, вы видели модальный в Bootstrap.
Итак, это точно так же, как модальный из Bootstrap.
Итак, здесь у нас есть диалог, который появляется на экране.
Теперь у нас есть место в диалоге, где мы можем теперь поместить
в содержание, которое нам нужно отобразить при вызове этого диалога.
Также обратите внимание на эту кнопку увольнение здесь.
Итак, когда вы нажимаете на это,
диалог также отклоняется.
Теперь, когда вы нажимаете в любом месте диалога,
ничего не происходит, но при нажатии на эту кнопку диалог отклоняется.
Итак, так работает компонент диалога из углового материала в нашем приложении.
Следующим шагом является добавление в форму входа в это диалоговое окно.
С этим мы завершаем это упражнение.
В этом упражнении вы видели, как мы можем использовать диалоговое окно Угловой материал, чтобы
добавить наложение в наше приложение, а затем показать его поверх текущего представления.
Добавим в форме к этому.
Это хорошее время для вас, чтобы сделать фиксацию Git с диалогами сообщений.