Мы знаем, что у нас нет компонента MultiSelect Angular2 Material. Вместо того, чтобы создавать его с нуля или добавлять независимый компонент из npm, давайте попробуем импровизировать компонент материала angular2 (md-menu) для создания множественного выбора.
Меню состоит из двух частей - триггера и меню.
Меню - это компонент наложения, который динамически подключается и отключается от DOM. Важно отметить, что он появляется в контейнере cdk-overlay за пределами нашего компонента приложения. Это гарантирует, что никакие два меню не будут открываться одновременно. Каждый элемент в меню помечен как «пункт меню», и это получает контейнер пульсации, чтобы показать эффект пульсации при нажатии.
Триггер обычно представляет собой кнопку, открывающую меню. Мы можем связать содержимое кнопки в зависимости от выбора, который происходит в меню. Таким образом, результат отображается на кнопке в соответствии с ожиданиями пользователя.
Теперь, когда основы представлены, перейдем к коду.
Создайте «md-menu» со списком «md-checkbox» и наблюдайте за поведением.
Вы поймете, что меню закрывается после каждого выбора. Это не то, что мы хотим.
Перейдите к исходному коду Angular2 Material Menu, взгляните на menu-directive.ts и его шаблон menu.html.
Вы заметите, что у «mat-menu-panel» есть прослушиватель событий щелчка под названием «_emitCloseEvent». По нашему требованию, нам нужно только избавиться от этой части. Определение функции показано ниже:
Директива Menu расширяет MdMenuPanel, который используется MdMenuTrigger.
Итак, нам просто нужно предотвратить поведение закрытия, которое происходит при щелчке по пункту меню.
Расширение меню
Создайте компонент настраиваемого меню и расширьте MdMenu, как показано ниже.
Обратите внимание, что мы сохраняем метаданные, включая анимацию. Это необходимо для сохранения основных функций компонента меню. MenuPositionX и MenuPositionY - это сервисы, которые будут получать координаты меню во время выполнения.
Измените его шаблон с помощью приведенного ниже кода.
Обратите внимание, что мы удалили привязку события щелчка, как упоминалось ранее.
Любой стиль, который необходимо включить в содержимое меню, должен быть частью компонента md-menu. Например, цвет флажка и типографику контента нужно оформить по-разному. Это связано с тем, что компонент меню отображается в наложении, и любой стиль, который должен входить в содержимое меню, недоступен из наложения.
Теперь компонент md-menu готов к использованию. Используйте его как Md-Menu, и вы заметите, что щелчок по пункту меню не закрывает меню, а остальная часть поведения остается неизменной.
Обратите внимание, что мы не используем «md-menu-item» для Md-Checkbox. Директива «md-menu-item» создает контейнер пульсации поверх элемента меню. Это займет события кликов, и поэтому флажок никогда не будет получать ваши клики. Поэтому мы должны пометить содержимое флажка как «md-menu-item».
Теперь используйте это настраиваемое Меню в вашем компоненте множественного выбора и представьте выбор тем способом, который вам подходит.
Я также могу использовать это cc-md-menu для создания раскрывающегося меню с одним выбором, используя радиогруппу вместо флажка.
Теперь то же самое поведение можно импровизировать с помощью компонента select. Но я оставлю это вам, чтобы вы попробовали.
PS: вы можете повторно использовать анимацию меню для воспроизведения стандартной анимации, подобной меню, в вашем приложении.
