[MÚSICA]
No primeiro módulo, revisamos brevemente as diretivas e
olhamos para as diretivas estruturais.
Vimos como as diretivas estruturais nos permitem projetar os modelos.
Para os nossos componentes angulares.
Nesta lição, vamos revisar diretivas de atributos.
O terceiro tipo de directiva.
E também vamos olhar para como podemos desenhar uma diretiva personalizada
no exercício que segue esta palestra.
Então, como percebemos, diretivas são uma maneira
de projetar ambos os modelos angulares e nos permitem fazer
várias partes da manipulação da barragem com um R Angular aplicações vistas.
Então, vimos o uso de diretivas para dar instruções para a repetição Angular e
como renderizar os modelos no DOM.
E nós já aprendemos que dentro do aplicativo Angular,
o uso de diretivas estruturais nos modelos nos permite projetar
nossas visões de nossa aplicação Angular.
Nós também aprendemos que o componente que temos usado tão
extensivamente nos vários exercícios neste curso.
É um tipo especial de directiva que tem um modelo ou uma vista anexada a ele.
E também aprendemos anteriormente que,
, existem dois outros tipos de diretivas que podemos usar em nossos modelos.
As diretivas estruturais e atributos.
Nós olhamos para algumas diretivas estruturais embutidas no primeiro módulo
deste curso.
E vimos como podemos usar diretivas estruturais como o NG4 ou NGF e
mais em que exercícios nas partes anteriores deste curso.
Agora vamos olhar para o outro tipo de diretiva, a diretiva de atributo.
O que é uma diretiva de atributo e
como ela nos ajuda ao projetar nosso aplicativo Angular.
Então, o que são diretivas de atributos?As diretivas de atributo
são usadas como atributos para elementos em seu modelo.
Assim, assim como você tem o seu código HTML que você escreve dentro do seu modelo e
os elementos HTML você pode aplicar uma diretiva de atributo
a esses elementos HTML.
Também vimos a diretiva estrutural do usuário.
E vimos que os próprios componentes podem adicionar elementos adicionais de
como HTML que podem ser usados dentro dos modelos do seu aplicativo Angular.
Então, a maneira como usamos os componentes com seus seletores
foi uma maneira que usamos diretivas dentro de nossa aplicação Angular.
Quando vimos o uso de diretivas estruturais que foram aplicadas a
os vários elementos HTML dentro do nosso modelo.
Agora olhamos para diretivas de atributos que nos permitem alterar
certas propriedades de nossos elementos HTML.
Então, qual é o uso de diretivas de atributos?
Diretivas de atributo escutam e modificam o comportamento de outros elementos HTML ou
atributos ou propriedades ou componentes que você usa em seus modelos.
Nós realmente usamos alguns dos built-in directiva atributos
já sem falar explicitamente sobre eles.
Falando sobre as diretivas de atributos incorporadas que vêm como parte da sua estrutura
Angular.
Você já encontrou modelo Ng em algumas das lições anteriores
neste curso, especificamente na área de ligação de dados e
também quando estudamos sobre as fontes no módulo anterior.
Há dois outros tipos de diretivas de atributo embutidas que
pode encontrar é ngClass e ngStyle.
Pelo nome em si você pode adivinhar qual é o seu propósito.
Da mesma forma, existem alguns outros módulos que você usa dentro de seus aplicativos Angular
como o FormsModule e também o RouterModule que têm seu
próprio conjunto de diretivas de atributo embutidas que fazemos uso.
Na verdade, já fizemos uso deles quando definimos formulários e
também o uso do roteador dentro da nossa aplicação Angular anteriormente.
Agora, neste ponto, vocês podem estar se perguntando, como faço para criar minha diretiva de atributo próprio
se estou interessado em criar uma diretiva personalizada, então
é aqui que vamos olhar para como você pode derivar uma diretiva personalizada.
Vamos explorar diretivas personalizadas no próximo slide brevemente e
no exercício a seguir.
Então, em diretivas personalizadas, sua expectativa é que você seria capaz de implementar
o que você está interessado em.
Em particular, então é aqui que podemos criar nossas próprias diretivas personalizadas.
Usando o Angular CLI, você pode andaime o código Bare Bones para uma diretiva
e, em seguida, modificar esse código para implementar sua diretiva personalizada.
Então, quando você implementa uma diretiva personalizada usando Angular CLI,
ela criará uma diretiva para você.
E então você notará imediatamente que dentro da diretiva,
você estará usando essa directiva decorador ornamentado classe
, a fim de converter a classe em uma diretiva e
vamos encontrar um tal no exercício que se segue.
Além disso, com o director, especialmente quando você estiver usando diretivas de atributo e
, você deseja modificar qualquer um dos elementos usados em seus modelos.
Outra classe que é útil para nós é chamada ElementRef.
Isso também é importante a partir do código Angular, e isso é injetado em seu construtor de directivas
, escrito sua classe directiva.
E então isso permite que você acesse os elementos DOM e
, em seguida, faça modificações neles.
Então, com esta rápida compreensão de como você pode criar diretivas personalizadas,
vamos dar uma olhada em um exemplo no exercício que segue esta palestra.
[MÚSICA]