Angular: recursos não óbvios dos seletores de diretiva

Se você já criou diretivas Angular, provavelmente usou uma construção que usa colchetes como seletor: ([]) . Essa abordagem, embora seja aplicada com mais frequência, não é a única possível. De fato, os seletores usados ​​nas diretivas oferecem ao programador amplo escopo para criatividade. Para demonstrar essa idéia em ação, o material, cuja tradução publicamos hoje, discute a metodologia para criar uma diretiva projetada para trabalhar com links externos que estão no modelo. Em particular, falaremos sobre como você pode encontrar elementos HTML regulares e, se necessário, excluir alguns deles da seleção usando a pseudo- :not .

Diretiva NgForm

Para considerar um exemplo de um seletor complexo, dê uma olhada na diretiva ngForm :

 @Directive({ selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,ng-form,[ngForm]', }) 

Aqui vale a pena prestar atenção ao seguinte:

• A diretiva pode ser projetada para vários seletores, que podem ser listados com uma vírgula.
• Aqui você pode misturar elementos de destino HTML (como <form> ) com atributos HTML (como ngForm ).
• Para excluir alguns elementos da seleção, você pode usar a pseudo- :not .

Criando uma diretiva para trabalhar com links externos

Por link externo, queremos dizer a tag <a> , que não possui uma diretiva routerLink . Considerando o que descobrimos analisando o exemplo anterior, o seletor correspondente pode ser descrito da seguinte maneira:

 @Directive({ selector: 'a:not([routerLink])', }) 

A beleza desse seletor é que não precisamos criar um nome de atributo para algo que possa ser melhor descrito como o oposto de alguma entidade.

Podemos destacar, para destacar links externos, algo como uma diretiva com o nome externalLink , mas isso é completamente desnecessário, pois essa abordagem se traduz na duplicação de mecanismos existentes. Além disso, é fácil esquecer de adicionar uma diretiva semelhante a alguns links externos. A força do nosso método é que, graças a uma linha, podemos acessar todos os links externos.

Os resultados da aplicação da diretiva a links externos devem ter a seguinte aparência:

• O link deve abrir em uma janela separada.
• O atributo rel deve ser adicionado ao link, o que melhorará o desempenho e aumentará a segurança da solução.

Ambos os objetivos são alcançáveis ​​através do uso de @HostBinding() :

 @Directive({ selector: 'a:not([routerLink])' }) export class ExternalLinkDirective { @HostBinding('rel') @Input() rel = 'noopener'; @HostBinding('target') @Input() target = '_blank'; } 

Observe que aqui, entre outras coisas, decoramos as propriedades usando o decorador @Input() , que, se necessário, abre possibilidades de redefinição.

Outra implementação válida dessa solução pode ser usar o decorador @Attribute() . Essa abordagem fornecerá um leve aumento no desempenho, porque, diferentemente do decorador @Input() , ao usar @Attribute() valores das propriedades correspondentes são calculados apenas uma vez, ou seja, as propriedades rel e target não são constantemente verificadas no ciclo de verificação de alterações.

Detalhes sobre esta técnica podem ser encontrados aqui .

Diretiva de teste

Vamos criar um bloco de navegação simples contendo links que levam a recursos externos:

 <nav> <a href="https://google.com">Google</a> <a href="https://bing.com">Bing</a> <a href="https://forbes.com">Forbes</a> </nav> 

Se, usando as ferramentas do desenvolvedor do Chrome, você vir o código HTML correspondente, poderá ver o seguinte:


Código HTML do bloco de navegação após a aplicação da diretiva

É exatamente disso que precisamos. A diretiva funciona sem a necessidade de seletores de atributos adicionais.

Sumário

Com esse material, você aprendeu que, ao trabalhar com diretivas angulares, não é necessário usar seletores de atributos. Aqui, examinamos primeiro a diretiva ngForm e depois usamos o conhecimento que adquirimos para criar nossa própria diretiva projetada para trabalhar com links externos. Esperamos que você ache essa técnica útil.

Caros leitores! Se você conhece alguma técnica não óbvia para o desenvolvimento de projetos da Web usando o Angular, fale sobre eles.