1

Estou utilizando Angular 7.

O meu objetivo é criar um directive para controlar o foco de alguns elementos com as setas do teclado (nesse exemplo, um menu lateral).

Vamos supor que eu tenha o seguinte html:

<ul list>
  <li>
    <a #item routerLink="home">Home</a>
  </li>
  <li>
    <a #item routerLink="about">Sobre</a>
  </li>
</ul>

Criei um directive no Angular com o nome ListDirective, e ele já está declarado no AppModule.
Nesse directive, eu gostaria de receber todos os elementos que possuam o atributo #item. Eu imagino que eu consiga fazer isso com o @ViewChildren('item'), mas ele está me retornando undefined.

Segue código:

import { AfterViewInit, Directive, QueryList, ViewChildren } from "@angular/core";

@Directive({
    selector: '[list]'
})

export class ListDirective implements AfterViewInit {
    @ViewChildren('item') items: QueryList<any>;

    ngAfterViewInit() {
        console.log(this.items); // undefined
    }
}

Quando tento fazer isso usando um componente em vez de um directive, funciona perfeitamente.
Esse exemplo que eu dei é um pouco diferente do que eu estou tentando fazer (apesar de eu já ter tentado dessa forma). Acho que o ideal é eu ter dois directives: o List (que ficaria na tag ul) e o ListItem (que ficaria nos links), pois dessa forma eu conseguiria manipular melhor os eventos dos links.

Usando o @ViewChildren(ListItem) items: QueryList<ListItem> também não funcionou, me retornando undefined. Parece que o problema é realmente o fato de eu estar tentando isso em um directive, mas não achei em lugar nenhum a informação de que é impossível fazer isso com directives.

EDIÇÃO

Para dar continuidade ao meu projeto, eu resolvi o problema usando um componente em vez de um directive, uma vez que o último não estava aceitando ViewChildren.
Criei uma classe que faz o trabalho, e sempre que um componente possuir uma lista do tipo, é só herdar dessa classe.

Ainda gostaria de fazer apenas com directives, mexendo apenas no html, então a pergunta permanece:

É possível utilizar o ViewChildren em um directive?

1 Resposta 1

1

Consegui fazer o que eu queria utilizando apenas directives.

Criei duas directives: A List e a ListItem.

Na primeira, usei o exportAs como opção no decorador, para que eu pudesse criar uma referência ao objeto no template.

Na segunda, criei um input que recebe um List, para que eu consiga fazer as duas directives se comunicar.

O código da ListDirective:

@Directive({
  selector: 'list',
  exportAs: 'list'
})
export class ListDirective {
  items: ListItemDirective[] = [];

  addItem(item: ListItemDirective) {
    this.items.push(item);
  }

  removeItem(item: ListItemDirective) {
    let idx = this.items.indexOf(item);

    this.items.splice(idx, 1);
  }
}

O código da ListItemDirective:

@Directive({
  selector: 'list-item'
})
export class ListItemDirective implements AfterViewInit {
  @Input('list-item') list: ListDirective;

  ngAfterViewInit() {
    this.list.addItem(this);
  }

  ngOnDestroy() {
    this.list.removeItem(this);
  }
}

E finalmente, o template:

<ul list #myList="list">
  <li>
    <a routerLink="home" [list-item]="myList">Home</a>
  </li>
  <li>
    <a routerLink="about" [list-item]="myList">About</a>
  </li>
</ul>

E pronto. No objeto ListDirective eu tenho a referência de todos os itens, e em todos os itens eu tenho a referência da lista.

EDIÇÃO: 10/02/2019

Encontrei uma forma mais simples de fazer isso. No ListItemDirective, é possível injetar o ListDirective através do decorador @Host(). Dessa forma, não é necessário receber o ListDirective através de um input, o que simplifica bastante a utilização dessas directives em um template.

ListDirective

@Directive({
  selector: 'list'
})
export class ListDirective {
  items: ListItemDirective[] = [];

  addItem(item: ListItemDirective) {
    this.items.push(item);
  }

  removeItem(item: ListItemDirective) {
    let idx = this.items.indexOf(item);

    this.items.splice(idx, 1);
  }
}

ListItemDirective

@Directive({
  selector: 'list-item'
})
export class ListItemDirective implements OnInit, OnDestroy {
  constructor(@Host() private list: ListDirective) {}

  ngOnInit() {
    this.list.addItem(this);
  }

  ngOnDestroy() {
    this.list.removeItem(this);
  }
}

Template

<ul list>
  <li>
    <a routerLink="home" list-item>Home</a>
  </li>
  <li>
    <a routerLink="about" list-item>About</a>
  </li>
</ul>

EDIÇÃO (15/07/2019)

Acabei de descobrir uma solução mais simples (e provavelmente a correta).

Na directive pai, basta adicionar uma propriedade com o decorador ContentChildren do tipo QueryList<directiveFilho>.

Essa variável estará disponível para o uso depois do conteúdo ser inicializado. Para acessá-la o mais rápido possível, devemos utilizar o callback ngAfterContentInit.

Para reagir à mudanças, o QueryList possui uma propriedade chamada changes, que é um observable.

Essa variável será atualizada automaticamente e seus elementos estarão na ordem que eles aparecem no template.

exemplo:

ListDirective

@Directive({
  selector: 'list'
})
export class ListDirective implements AfterContentInit {
  @ContentChildren(ListItemDirective) items: QueryList<ListItemDirective>;

  ngAfterContentInit() {
    // this.items estará disponível aqui
  }
}

ListItemDirective

@Directive({
  selector: 'list-item'
})
export class ListItemDirective {

}

Template

<ul list>
  <li>
    <a routerLink="home" list-item>Home</a>
  </li>
  <li>
    <a routerLink="about" list-item>About</a>
  </li>
</ul>
1
  • Obrigado por compartilhar sua solução
    – Jean Carlo
    15/05/2019 às 16:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .