У нас только что было краткое введение к атрибутивным директивам в предыдущей лекции.
Давайте теперь построим пользовательскую директиву атрибута для нашего углового приложения, а затем
использовать ее в представлениях некоторых компонентов в нашем угловом приложении.
По пути мы узнаем о том, как мы можем создавать пользовательские директивы
и использовать их в нашем угловом приложении.
Мы будем использовать Angular CLI для создания пользовательской директивы и затем
обновить ее, чтобы выполнить вид
функций, которые нам нужны в этой директиве атрибута.
Под директивой сохранить в отдельной папке с именем Directives,
в моей папке приложения.
Итак, позвольте мне создать новую папку с именем Directives.
Теперь я собираюсь создать свою пользовательскую директиву внутри этой папки Directives.
Пользуется угловым CLI, чтобы создать нашу пользовательскую директиву.
Итак, в подсказке тип
ng генерировать или g детективами/выделить.
Таким образом, эта конкретная директива будет называться директивой выделения.
Таким образом, мы создадим
новую директиву, называемую директивой выделения, а затем мы теперь пойдем
и отредактируем, что выделите директивные файлы, которые
были созданы для создания нашей пользовательской директивы.
Что именно я пытаюсь достичь с помощью этой директивы?
Позвольте мне отвезти вас в меню в нашем угловом приложении.
В представлении меню
, когда я хочу выбрать любой из этих пунктов в настоящее время,
Я не знаю точно, где я нахожусь.
Теперь вместо этого, когда моя мышь наводит на любой из этих элементов в моем списке сетки,
я хочу иметь возможность выделить какой-то элемент, чтобы указать, что если я нажимаю,
я собираюсь выбрать этот конкретный элемент.
Итак, это то, что функциональность, которую я собираюсь разработать
, используя мою директиву выделения, которую я только что создал.
Для этого давайте откроем файл directive.ts выделения.
Итак, вы видите, что у нас есть лесные леса без костей, доступные для директивы
уже здесь, и вы увидите, что мы имеем
уже импортировали директора из углового кода.
Теперь к этому, я собираюсь добавить еще несколько импорта.
Итак, мы импортируем ElementRef, а затем импортируем Renderer2 здесь.
Теперь Renderer2 доступен только с Угловым четырьмя и выше.
Более ранняя версия рендерера называлась
renderush и теперь она была дублирована с Угловым четырем.
Renderer2 теперь является новой реализацией рендерера
с лучшей поддержкой некоторых других функций.
Итак, я собираюсь применить Renderer2 для создания директивы выделения.
Почему теперь мы используем этот рендерер?
Теперь, когда вы создаете директивы в вашем угловом приложении,
из самого углового приложения,
хотя на данный момент наше угловое приложение отображается в основном в браузере,
вы можете использовать тот же код строительных лесов для
ваше угловое приложение для создания приложения для других целей.
В родном курсе пропуска, который мы увидим позже в этой специализации,
мы увидим еще одно использование этого кода для создания приложений с использованием NativeScript.
Таким образом, в этом случае рендеринг будет выполняться по-другому,
не в браузере.
Таким образом, нам нужно использовать этот Renderer2,
, который позволяет нам автоматически адаптироваться к
соответствующей платформе, на которой делается рендеринг этого представления.
Итак, вот почему я использую рендерер здесь.
Кроме того, еще одна вещь, которую я хочу импортировать, - это HostListener.
HostListener будет слушать движения мыши с экрана
и соответствующим образом реагировать в этих обстоятельствах.
Мы увидим использование этих, когда мы создадим директиву через несколько минут.
Итак, теперь, когда мы импортировали то, что нам нужно,
мы собираемся ввести несколько вещей в наш конструктор.
Итак, мы сначала используем el,
, который имеет тип ElementRef и
также второй, который мы будем использовать, является рендерером,
который имеет тип Renderer2.
Теперь с этим, что мы собираемся сделать, это то, что мы будем использовать
HostListener, а затем они будут указывать, что для HostListener,
, когда происходит событие mouseenter,
тогда мы будем называть метод onmouseenter
и в методе onmouseenter, мы собираемся что-то сделать.
Аналогичным образом, я создаю еще один
под названием HostListener и mouseleave.
Итак, когда мышь покидает определенный регион,
то что вы собираетесь делать на mouseleave?
Мы собираемся сделать другую операцию.
Итак, что мы собираемся сделать, это когда мышь входит в определенный регион, в данном случае
мы используем эту директиву атрибута для того, чтобы выделить
конкретный элемент из моего списка сетки, на который навел курсор мыши.
Итак, это цель для реализации этих
и когда указатель мыши отходит от этого элемента,
, который больше не будет выделяться.
Итак, это цель этой директивы,
директива выделения, которую я создаю здесь.
Итак, когда мышь входит в определенную область.
Итак, я собираюсь использовать рендерер, и рендерер предоставляет метод addClass.
Таким образом, этот метод будет использоваться для добавления класса к элементу сетки в моем списке сетки.
Итак, класс, который я собираюсь добавить,
способ, как он настроен, скажет this.el.nativeElement и
вторым параметром является
имя класса, которое вы собираетесь применить, когда вы начинаете в эту область.
Итак, мы применим этот класс подсветки к этому элементу, когда
ваша мышь перемещается в область, где этот элемент отображается в представлении.
Теперь то же самое. Я собираюсь сделать другой метод, когда мышь уходит,
я удалю этот класс.
Таким образом, метод removeClass также поддерживается Renderer2.
Итак, в этом случае
, когда мышь перемещается в этот регион,
этот класс выделения будет добавлен к этому элементу сетки.
Когда мышь покидает этот конкретный элемент сетки,
класс выделения будет удален из элементов сетки.
Итак, вот как с помощью этой директивы атрибута
я добавляю и удаляю классы,
CSS классы в мой элемент сетки на моей странице GridView.
Теперь, следующим шагом, конечно, является создание этого класса, называемого классом выделения.
Итак, чтобы сделать это, я перейду в файл styles.scss
, где у нас есть глобальные стили, хранящиеся здесь.
Итак, в файле styles.scss
я добавлю в выделенный класс CSS.
Выделяющий класс CSS, который я определяю как цвет фона.
Я буду применять background-bale,
, который я уже определил ранее, а затем,
Я бы применил границу одного пикселя,
сплошную границу цвета,
первичный цвет-темный, который также я определил ранее
как переменная CSS, и я также увеличим z-индекс до одного.
Это означает, что этот пункт будет поднят над оставшимися в нем элементами.
Я уверен, что из ваших знаний CSS вы понимаете, что делается.
Кроме того, я собираюсь сделать немного преобразования на предмет там,
Я просто собираюсь увеличить его на крошечную сумму,
масштабировать его до 1,01.
Итак, крошечный немного поднял, а затем появился,
так что выделяет его на экране.
Итак, это класс CSS, который
я собираюсь применить, используя пользовательскую директиву, которую я создал там.
Теперь, где я буду применять эту пользовательскую директиву?
Мы будем использовать эту пользовательскую директиву в нашем файле шаблона компонентов меню.
Теперь, прежде чем мы сделаем это,
вернемся к директиве выделения и
вы заметите, что в директиве выделения
у вас есть этот декоратор директивы здесь, где у вас есть свойство selector,
, который был установлен для подсветки приложения.
Итак, везде, где вы хотите использовать эту директиву,
вы будете использовать атрибут
appHighlight в пределах этого конкретного элемента в вашем шаблоне.
Итак, вот как создается эта директива.
Итак, давайте применим это приложение выделить атрибут
директиву в нашем файле шаблона компонентов меню.
Итак, перейдя в файл шаблона компонентов меню,
я собираюсь применить эту директиву выделения к этой mat-grid-плитке здесь.
Итак, в этой плитке сетки
я буду применять эту директиву атрибута appHighlight к этому конкретному элементу здесь.
С этим мы завершили все обновления.
Давайте сохраним изменения, а затем пойдем и посмотрим на наше приложение после этого изменения.
Перейти в наше приложение в браузере.
Теперь, с применением директивы appHighlight, которую мы только что создали,
вы заметите, что именно происходит, когда мы просматриваем элемент в нашем представлении меню здесь.
Итак, вы замечаете, что всякий раз, когда вы наведите курсор на элемент в представлении,
класс выделения CSS применяется к каждому из них,
, в котором какой конкретный пункт выделяется в меню,
, чтобы это дало лучший пользовательский опыт для пользователя.
Вы можете видеть, что размер этого элемента когда-либо так немного
увеличился и выдвинут вперед в представлении здесь.
Это завершает реализацию
пользовательской директивы атрибутов, которую мы сделали в этом упражнении.
Это хорошее время для вас, чтобы сделать git commit с директивой сообщения.