Meu roteamento nos aplicativos angular2 funciona bem. Mas vou fazer algum routeLink com base nisso :
Aqui está minha rota:
E aqui estão os links que fiz:
Espero que, quando clico neles, navegue até o componente respeitado, mas eles não realizam nada?
Você pode tentar [routerLink]='[/home']? Qual versão do Angular2 e versão do roteador você está usando?
não funciona. você tem certeza do local das suas perguntas ?? Acho que estou usando a última versão do angular2, mas não sei como verificar. Eu o gerei com ng new . e deve ser atualizado
Desculpe, deveria ser[routerLink]="['/home']"
Talvez você tenha esquecido de adicionar directives: [ROUTER_DIRECTIVES],os metadados do seu componente. Sem isso, o Angular não saberá analisar os routerLinks.
Possível duplicata do link do roteador Angular2 não está funcionando
O código que você está mostrando está absolutamente correto.
Eu suspeito que o seu problema é que você não está importando RouterModule (que é onde RouterLink é declarado) para o módulo que usa este modelo.
Tive um problema semelhante e demorei algum tempo a resolver porque este passo não é mencionado na documentação.
Portanto, vá para o módulo que declara o componente com este modelo e adicione:
em seguida, adicione-o às suas importações de módulos, por exemplo
Além de ter as instruções de importação corretas, você também precisará de um local para que o routerLink seja mostrado, que é o <router-outlet></router-outlet>elemento, de modo que também precise ser colocado em algum lugar em sua marcação HTML para que o roteador saiba onde exibir esses dados.
Eu pensei que sim - você está absolutamente certo no meu caso também!
Adicionar o módulo Roteador às minhas importações resolveu, obrigado!
Funciona para mim. Muito obrigado!
não se esqueça disso para adicionar o seguinte em seu modelo:
Tente alterar os links conforme abaixo:
Além disso, adicione o seguinte no cabeçalho de index.html:
use-o assim para obter mais informações, leia este tópico
De acordo com o seu link, o dele routerLinkdeve funcionar ;-)
Isso funciona para "@angular/router": "~3.4.0". Felicidades!
Sim, a notação de colchetes funciona (e é uma sintaxe válida com um propósito específico), mas não é uma solução para esta questão.
— isherwood de
Estou ciente de que esta questão é bastante antiga agora, e provavelmente você já a corrigiu, mas gostaria de postar aqui como referência para quem encontrar esta postagem enquanto soluciona este problema é que esse tipo de coisa venceu não funcionará se suas tags Anchor estiverem em Index.html. Precisa estar em um dos componentes
Os links estão errados, você deve fazer isso:
Você pode ler este tutorial
A notação de colchetes tem um propósito diferente e não resolve esse problema.
era isso! <a [routerLink]="['/home']" routerLinkActive="active"> Home </a> Eu estava seguindo o tutorial que me fez colocar o routerLinkActive na tag <li>. quando coloquei na tag <a, agora funciona! Muito Obrigado!!!! Isto e excelente!
BTW, eu já tenho todas as outras tags / elementos sugeridos no lugar. Agora, esse recurso funciona (mais ou menos). Tenho que seguir o resto do tutorial porque percebo que quando seleciono outras linhas, mesmo que o valor da linha selecionada esteja sendo passado (vejo na url), apenas a primeira linha está sendo renderizada. Mas esse será outro tópico. Muito obrigado novamente por esta grande ajuda.
Não sei por que, mas quando coloquei o Bracket, funcionou para mim e não importei RouterModule no meu módulo de app.
Eu estava usando routerlink em vez de routerLink .
— farsa, falso
Eu cometi esse erro e isso consertou! Eu também não tenho ideia de por que você teve uma votação negativa (talvez porque isso poderia ter sido um comentário ou porque não responde diretamente a essa pergunta específica?). Seria bom se as pessoas que votaram negativamente pudessem explicar o motivo.
Para qualquer pessoa que tenha esse erro depois de dividir os módulos, verifique suas rotas, o seguinte aconteceu comigo:
Mova { path: '**', redirectTo: 'home' }para seu AppRoutingModule:
Há também outro caso que se adequa a esta situação. Se em seu interceptor, você o fez retornar um valor não booleano, o resultado final é assim.
Por exemplo, tentei devolver obj && obj[key]coisas. Depois de depurar por um tempo, então eu percebi que tenho que converter isso para o tipo booleano manualmente Boolean(obj && obj[key]), para deixar o clique passar.
Seguindo o exemplo de trabalho , descobri a solução para o caso de componente puro:
Declarar componente no nível do aplicativo
Não inicie no componente
Para olhos não muito penetrantes como os meus, em hrefvez de routerLink, fiz algumas pesquisas para descobrir o #facepalm.