[Dúvida] Diferença entre o RouterLink no template e o Router.navigate no componente

Olá, Leonardo! Tudo bem contigo?

A diferença entre o RouterLink no template e o Router.navigate no componente é que o RouterLink é usado para navegação declarativa no template, enquanto o Router.navigate é usado para navegação programática no componente.

Quando você usa o RouterLink no HTML, você está declarando a rota para onde deseja navegar. Por exemplo, se você tem um botão com o RouterLink para a rota "/nova-pagina", ao clicar nesse botão, o Angular vai automaticamente navegar para a rota "/nova-pagina".

Já o Router.navigate é usado quando você precisa navegar para uma rota de forma programática, ou seja, quando você precisa fazer alguma ação antes de navegar, como por exemplo, chamar um serviço ou obter algum dado. Você pode usar o Router.navigate dentro do subscribe de uma ação chamada pelo serviço para navegar para outra página após a criação do pensamento, por exemplo.

No seu teste, você percebeu que ao usar apenas o RouterLink do botão, a página não carregava o pensamento recém criado. Isso acontece porque o RouterLink não espera a resposta do serviço antes de navegar para a próxima rota. Para resolver esse problema, você pode usar o Router.navigate dentro do subscribe da ação chamada pelo serviço, assim a navegação só acontecerá após a resposta do serviço.

Por exemplo:

this.service.criar(this.pensamento).subscribe(() => {
  // Ação a ser realizada após a criação do pensamento
  this.router.navigate(['/outra-rota']);
});

Dessa forma, a navegação só será feita após a criação do pensamento.

Espero ter ajudado e bons estudos!