Acabamos de ter uma breve introdução às diretivas de atribuição na palestra anterior.
Vamos agora construir uma diretiva de atributo personalizado para nossa aplicação angular e, em seguida,
fazer uso dela dentro das visualizações de alguns dos componentes dentro de nossa aplicação angular.
Ao longo do caminho, vamos aprender sobre como podemos criar
diretivas personalizadas e usá-las em nosso aplicativo Angular.
Vamos fazer uso de Angular CLI para criar a diretiva personalizada e, em seguida,
atualizá-lo para executar o tipo de recursos
que precisamos fornecidos por esta diretiva de atributo.
Sob a manter a diretiva em uma pasta separada chamada Diretivas,
dentro da pasta do meu aplicativo.
Então, deixe-me criar uma nova pasta chamada Diretivas.
Agora, vou criar minha diretiva personalizada dentro desta pasta Diretivas.
Terá a ajuda da CLI angular para criar nossa diretiva personalizada.
Então, no prompt,
digite ng generate ou g detectives/highlight.
Então, esta directiva em particular vai ser chamada de directiva destaque.
Então, com isso, vamos criar
uma nova diretiva chamada diretiva de destaque e então vamos agora ir
e editar que destacar arquivos de diretiva que
foram criados para criar nossa diretiva personalizada.
O que exatamente estou tentando alcançar com esta diretiva?
Deixe-me levá-lo para a visualização do menu dentro da nossa aplicação Angular.
Na exibição de menu,
quando eu quiser selecionar qualquer um desses itens atualmente,
Eu não tenho idéia exatamente onde estou.
Agora, em vez disso, quando meu mouse passar sobre qualquer um desses itens na minha lista de grade,
Eu quero ser capaz de destacar algum item para indicar que, se eu clicar,
eu vou estar selecionando esse item específico.
Então, isso é o que a funcionalidade que eu estou indo para
design usando minha diretiva de destaque que eu acabei de criar.
Para fazer isso, vamos abrir o arquivo diretive.ts de destaque.
Então, você vê que temos o andaime bare-bones disponível para a diretiva
já aqui e você verá que temos
já importou o diretor do código Angular.
Agora a isso, vou adicionar mais algumas importações.
Então, vamos importar ElementRef e, em seguida, vamos importar Renderer2 aqui.
Now Renderer2 está disponível somente com Angular four e superior.
A versão anterior do renderizador foi chamada
renderush e foi duplicada agora com Angular quatro.
Renderer2 agora é uma nova implementação do renderizador
com melhor suporte para alguns outros recursos.
Então, eu vou aplicar o Renderer2 para criar a diretiva de destaque.
Agora, por que usamos este renderizador?
Agora, quando você cria diretivas dentro do seu aplicativo Angular,
do seu próprio aplicativo Angular,
embora no momento nosso aplicativo Angular esteja sendo renderizado principalmente no navegador,
você pode usar o mesmo código de andaimes para
seu aplicativo Angular para criar um aplicativo para outros fins.
No curso de salto nativo que veremos mais tarde nesta especialização,
veremos outro uso deste código para criar aplicativos usando NativeScript.
Então, nesse caso, a renderização seria feita de uma maneira diferente,
não em um navegador.
Então, precisamos usar este Renderer2,
que nos permite adaptar automaticamente a
a plataforma apropriada na qual a renderização desta visão está sendo feita.
Então, essa é a razão pela qual eu estou fazendo uso do renderizador aqui.
Além disso, mais uma coisa que quero importar é o HostListener.
O HostListener ouvirá os movimentos do mouse da tela
e responderá adequadamente nessas circunstâncias.
Veremos o uso destes quando criarmos a diretiva em alguns momentos.
Então agora, que importamos as coisas que precisamos,
vamos injetar algumas coisas em nosso construtor.
Então, vamos primeiro usar um el,
que é do tipo ElementRef e
também o segundo que usaremos é o renderizador,
que é do tipo Renderer2.
Agora com isso, o que vamos fazer é que vamos usar
o HostListener e então eles indicariam que para o HostListener,
quando o evento mouseenter ocorrer,
então vamos chamar o método onmouseenter
e no método onmouseenter, vamos fazer alguma coisa.
Da mesma forma, vou criar outro
chamado HostListener e mouseleave.
Então, quando o mouse deixa uma determinada região,
então o que você vai fazer no mouseleave?
Vamos fazer uma operação diferente.
Então, o que vamos fazer é quando o mouse entra em uma determinada região, neste caso,
estamos usando esta diretiva de atributo para destacar
o item específico da minha lista de grade para o qual o mouse passou o mouse.
Então, esse é o propósito para implementar esses
e quando o ponteiro do mouse passar para longe desse item,
que não será mais destacado.
Então, esse é o propósito desta diretiva,
a diretiva de destaque que estou criando aqui.
Então, quando o mouse entra em uma área específica.
Então, eu vou usar o renderizador e o renderizador fornece um método chamado addClass.
Então, este método será usado para adicionar uma classe ao item de grade na minha lista de grade.
Então, a classe que eu vou adicionar,
da maneira que ela está configurada é dirá this.el.nativeElement e
o segundo parâmetro é
o nome da classe que você vai aplicar quando você se aventurar nessa área.
Então, vamos aplicar essa classe de destaque a esse elemento quando
seu mouse se move para a região onde esse elemento é renderizado na exibição.
Agora, a mesma coisa. Eu vou fazer outro método quando o mouse sair,
Eu vou remover essa classe.
Então, o método RemoveClass também é suportado pelo Renderer2.
Então, neste caso,
quando o mouse se move para essa região,
esta classe de destaque será adicionada a esse item de grade.
Quando o mouse sair desse item específico da grade,
a classe de destaque será removida dos itens da grade.
Então, é assim que usar esta diretiva de atributo,
Estou adicionando e removendo classes,
classes CSS ao meu item de grade na minha página GridView.
Agora, o próximo passo é, naturalmente, criar esta classe chamada como a classe de destaque.
Então, para fazer isso, vou para o arquivo styles.scss
onde temos os estilos globais armazenados aqui.
Então, dentro do arquivo styles.scss,
vou adicionar na classe CSS destaque lá.
A classe CSS destaque que vou definir como cor de fundo.
Vou aplicar background-pale,
que eu já defini anteriormente e, em seguida,
Eu aplicaria uma borda de um pixel,
borda sólida da cor,
primário-cor-escuro, que também eu defini anteriormente
como uma variável CSS e eu também aumentarei o z-index para um.
O que significa que esse item será levantado sobre os itens restantes lá.
Tenho certeza que pelo seu conhecimento de CSS você entende o que está sendo feito.
Além disso, eu vou fazer um pouco de uma transformação no item lá,
Eu só vou escalá-lo por uma pequena quantidade,
por escala até 1,01.
Então, um pouquinho levantado e, em seguida, apareceu,
para que destaca na tela.
Então, esta é a classe CSS que
eu vou aplicar usando a diretiva personalizada que eu criei lá.
Agora, onde vou aplicar esta diretiva personalizada?
Vamos usar esta diretiva personalizada em nosso arquivo de modelo de componentes de menu.
Agora, antes de fazermos isso,
vamos voltar para destacar diretiva e
você notaria que na diretiva de destaque,
você tem esse decorador de diretiva aqui onde você tem uma propriedade chamada seletor,
que foi definida para destaque do aplicativo.
Então, onde quer que você queira usar esta diretiva,
você usará um atributo chamado
AppHighLight dentro desse elemento específico em seu modelo.
Então, é assim que esta diretiva é criada.
Então, vamos aplicar este aplicativo destaque atributo
diretiva dentro do nosso arquivo de modelo de componentes do menu.
Então, indo para o arquivo de modelo de componentes do menu,
Eu vou aplicar essa diretiva de destaque para este tapete de grade aqui.
Então, neste bloco de grade,
Eu aplicarei essa diretiva de atributo AppHighLight a este elemento particular aqui.
Com isso, concluímos todas as atualizações.
Vamos salvar as alterações e, em seguida, ir e dar uma olhada em nosso aplicativo após essa mudança.
Indo para a nossa aplicação no navegador.
Agora, com a aplicação da diretiva AppHighLight que acabamos de criar,
você vai notar exatamente o que acontece quando navegamos para um elemento em nossa exibição de menu aqui.
Então, você percebe que sempre que você passar o mouse sobre um item na exibição,
a classe CSS destaque está sendo aplicada a cada um deles,
em que qual item particular está sendo destacado no menu,
para que isso dê uma melhor experiência de usuário para o usuário.
Você pode ver que o tamanho desse elemento é sempre tão ligeiramente
aumentado e trazido para a frente na vista aqui.
Isso conclui a implementação de
a diretiva de atributo personalizado que fizemos neste exercício.
Este é um bom momento para você fazer um commit git com a diretiva de mensagem.