como dar um

Solucionado (ver solução)

Solucionado
(ver solução)

1
resposta

Referente ao curso Angular parte 1: produtividade e organização com framework SPA

por Henrique Monteiro de Moraes

| 69k xp | 2 posts

Software Developer

Por questão de acessibilidade, mais especificamente skip to main content, eu preciso que, sempre que eu abrir uma nova página (no caso via routerLink), estar apto a, ao apertar TAB uma única vez, acessar o link que vai me direcionar para o conteúdo principal da página.

Em resumo, preciso que, ao acessar uma nova página via routerLink:

Adicionar foco na div que chama o link (que vai me mandar para o conteúdo principal) OU
Dar um refresh na página, para que quando eu der o primeiro TAB eu já caia no link que vai me mandar para o conteúdo principal

1 resposta

solução!

por Mateus Henrique

| 969.5k xp | 1546 posts

Instrutor Desenvolvedor

13/12/2021

Fala Henrique, tudo bem? Espero que sim!

Vamos lá, para fazer isso, primeiramente precisamos identificar o input no template que você deseja dar o foco:

<input type="text" #input />

Ali eu coloquei o nome como input mas você pode utilizar qualquer nome.

Agora precisamos selecionar esse elemento, para isso iremos na classe do componente e utilizar o decorator ViewChild que busca um elemento no dom:

@ViewChild('input') private elementRef: ElementRef;

Próximo passo é utilizar o método ngAfterViewInit para realizar o foco sempre que a view for carregada:

  ngAfterViewInit() {
    this.elementRef.nativeElement.focus();
  }

Assim sempre que a view for carregada o foco será aplicado.

Espero ter ajudado, abraços e bons estudos :D