1) Sinais vs RxJS: Criando uma variável de sinal do zero em Angular 16 e comparando-a com um observável.

Com um exemplo onde temos um menu da barra lateral e um menu superior, cada vez que pressionamos um botão, o menu superior fará com que o menu da barra lateral seja recolhido:

Com RxJS:

Essa comunicação é feita em um serviço utilizando um assunto e um observável, onde toda vez que clicamos no botão, é chamado um next, que passa o valor emitido para o observável inscrito. O componente do menu da barra lateral simplesmente será inscrito e usará esta propriedade no HTML. Primeiro, criamos o Assunto no serviço, depois criamos o observável a partir dele e chamamos next para passar o valor emitido:

Com sinais:

Isso pode ser feito simplesmente com Sinais. Os sinais foram criados em Angular para obter melhor desempenho em determinados casos mais simples. Eles são importados de @angular/core.

Você precisa declarar um sinal, e toda vez que atualizamos esse sinal, chamamos set nele. No componente do menu da barra lateral, basta fazer referência a essa propriedade, e para usar o sinal no HTML, precisamos colocar parênteses para obter seu valor, pois é assim que os sinais são usados.

Também podemos realizar uma atualização, que tem a vantagem adicional de nos informar o valor anterior. Para isso especificamos que ele recebe o valor anterior e seu tipo, e com uma função de seta indicamos o novo valor, que é o novo valor negado:

Também existem maneiras de converter observáveis ​​em sinais e sinais em observáveis:

Não é que os sinais substituam os assuntos, pois ambos, junto com os observáveis, são muito mais poderosos e têm muito mais recursos, como operadores RxJS (temos muito mais controle com RxJS). No entanto, os sinais fornecem uma maneira simples de trabalhar e são comuns com outras bibliotecas e estruturas.

RxJS é uma biblioteca da Microsoft, não Angular. Em contrapartida, Signals é uma biblioteca do Angular, que proporciona maior controle e desempenho, pois permite ao Angular saber exatamente qual parte foi alterada quando um estado muda. Isso evita ter que renderizar novamente todo o componente, concentrando-se apenas naquela parte específica.

2) Nova maneira simplificada de cancelar a assinatura com takeUntilDestroyed do RxJS em Angular 16.

Em Angular, é importante cancelar a assinatura de observáveis. Por exemplo, no OnInit armazenamos uma assinatura e no OnDestroy cancelamos a assinatura.

A maneira antiga era armazenar uma variável com a assinatura, e na hora de assinar, salvá-la naquela variável e destruir essa assinatura no OnDestroy:

Explicação detalhada: Uma propriedade do tipo Subscription (de RxJS) é criada. Esta propriedade é inicializada em ngOnInit, atribuindo-lhe a referência da assinatura quando esta é realizada. Então, no ngOnDestroy, a assinatura é cancelada. Caso o componente não tenha definido a variável de assinatura, é necessário tratar o erro, seja através de um ponto de interrogação para verificar se está definida ou através de uma condicional.

Agora, isso pode ser feito de forma mais simples, sem criar OnDestroy ou uma variável de assinatura, usando o operador RxJS takeUntilDestroyed. O que isso faz é cancelar automaticamente a assinatura quando o componente estiver prestes a ser destruído. É importante injetar o serviço DestroyRef e passá-lo, para que ele saiba quando o componente foi destruído:

Explicação detalhada: Agora, no caso em que não estamos cancelando a assinatura, adicionamos um pipe RxJS e enviamos um takeUntilDestroyed(), um operador NEW, que exige que passemos um destroyRef, que é um serviço (de @angular /core) que podemos injetar no construtor.

Exemplo: em um serviço de barra lateral, ele escuta um clique de botão no componente da barra de navegação. Com takeUntilDestroyed(), ele cancela a assinatura apenas quando o componente é destruído, evitando múltiplas assinaturas. Neste caso, queremos sempre ouvir se o botão foi pressionado ou não; portanto, só queremos cancelar a assinatura se o componente for destruído.

Isso é importante fazer, caso contrário, ele estará escutando mesmo se estivermos em outros componentes, e só cancelará a assinatura se fecharmos o aplicativo, pois o componente foi destruído. Isso é fundamental porque se ele estiver sempre ativo, ao navegar pelos componentes da página, por exemplo, na primeira navegação, ele se inscreve, depois navegamos para outra página, e quando voltamos para a primeira página, seria uma segunda assinatura, resultando em duas assinaturas ativas. Portanto, é importante cancelar a assinatura.

Uma observação importante: quando assinamos uma solicitação HTTP, não é necessário cancelar a assinatura, pois isso é feito automaticamente.

3) Efeito de um sinal em Angular. Ouvindo mudanças em um sinal.

Em um exemplo, temos um Signal que retorna um booleano e em um método abaixo, ele atualiza com um update:

Imagine que você deseja ser alertado sempre que o sinal mudar, mas ele muda em vários lugares, não apenas neste método. Se quisermos fazer alguma coisa sempre que ela mudar, podemos fazer isso com um efeito. Esta função recebe um sinal e verifica se ele muda para executar automaticamente o método dentro do efeito:

Com isso, por exemplo, em vez de um log do console, podemos salvar o valor no armazenamento local e instanciá-lo com esse valor. Isso é especialmente útil ao trabalhar com código que não conhecemos e não temos certeza de quantos lugares ele está sendo modificado.

— Notas baseadas no curso Angular da EfisioDev —