Os documentos atuais falam apenas sobre como obter parâmetros de rota, não os segmentos de rota reais.
Por exemplo, se eu quiser encontrar o pai da rota atual, como isso é possível?
angular
angular2-routing
pdeva
fonte
fonte
window.location.pathname
window.location
é que, no futuro, eles desejam implementar a renderização no servidor, enfrentarão algumas dificuldades, uma vezwindow
que não existe no servidor Node.js, mas precisam usar os métodos padrão Angular para acessar a rota e eles ficarão bem no servidor e no navegador.Respostas:
O novo roteador V3 tem uma propriedade de URL.
fonte
this.router.events.filter((event: any) => event instanceof NavigationEnd).subscribe(event => { console.log('this is what your looking for ', event.url); });
. Certifique-se de importarimport { Router, NavigationEnd } from '@angular/router';
RC4 angular:
Você pode importar
Router
de@angular/router
Em seguida, injete-o:
Em seguida, chame seu parâmetro de URL:
fonte
Injete
Location
no seu componente e leialocation.path();
Você precisa adicionarVocê precisa adicionarROUTER_DIRECTIVES
um local para que o Angular possa resolverLocation
.import: [RouterModule]
ao módulo.Atualizar
No roteador V3 (RC.3), você pode injetar
ActivatedRoute
e acessar mais detalhes usando suasnapshot
propriedade.ou
Consulte também ouvinte de eventos do roteador Angular 2
fonte
navigate
método, juntamente com o nome (anexado) da rota filho para a qual quero navegar.MyTrackingService
explicado em stackoverflow.com/a/34548656/217408 permita acessar esses valores.canActivate()
método, para que eu possa redirecionar para uma página de "login" e depois redirecionar de volta para a rota original depois que o usuário se autenticar?para novo roteador> = RC.3
Melhor e uma maneira simples de fazer isso é!
fonte
Usa isto
E na
main.ts
importaçãoEDITAR
Maneira moderna
fonte
/
.Para quem ainda está procurando por isso. No Angular 2.x, existem algumas maneiras de fazer isso.
Referências:
fonte
Para obter os segmentos da rota:
fonte
Você pode tentar com
Maneiras alternativas
window.location.pathname
que fornece o nome do caminho.fonte
Para obter com segurança a rota atual completa, você pode usar este
fonte
O
window
objeto nativo também funciona bemNOTA: NÃO UTILIZE ESTE NA RENDERAÇÃO LATERAL DO SERVIDOR
fonte
versão curta se você tiver roteador importado, poderá simplesmente usar algo como
this.router.url === "/ pesquisa"
caso contrário, faça o seguinte
1) Importe o roteador
2) Declarar sua entrada no construtor
3) Use seu valor em sua função
resposta @ victor me ajudou, esta é a mesma resposta que ele, mas com um pequeno detalhe, pois pode ajudar alguém
fonte
fonte
No Angular2 Rc1, você pode injetar RouteSegment e passá-los no método naviagte.
fonte
Com o angular 2.2.1 (em um projeto baseado no angular2-webpack-starter) funciona isso:
No modelo do AppComponent, você pode usar, por exemplo, {{activeUrl}}.
Esta solução é inspirada no código do RouterLinkActive.
fonte
angular 2 rc2
fonte
Aqui está o que está funcionando para mim no Angular 2.3.1.
O
data
é um objeto e precisamos daurl
propriedade contida nesse objeto. Portanto, capturamos esse valor em uma variável e também podemos usá-la em nossa página HTML. Por exemplo, eu quero mostrar uma div somente quando o usuário estiver na página inicial. Nesse caso, o valor do URL do meu roteador será/home
. Para que eu possa escrever uma div da seguinte maneira:fonte
Eu tive o mesmo problema usando
Eu recebo a rota atual com parâmetros de consulta. Uma solução alternativa que fiz foi usar isso:
Não é uma solução muito boa, mas útil.
fonte
Você pode usar
ActivatedRoute
para obter o roteador atualResposta original (para versão RC)
Encontrei uma solução no AngularJS Google Group e é tão fácil!
Aqui está a resposta original
https://groups.google.com/d/msg/angular/wn1h0JPrF48/zl1sHJxbCQAJ
fonte
url
agora não é mais a URL e uma string, mas aComponentInstruction
.fonte
Para seus propósitos, você pode usar
this.activatedRoute.pathFromRoot
.Com a ajuda de pathFromRoot, você pode obter a lista de URLs pai e verificar se a parte necessária da URL corresponde à sua condição.
Para obter informações adicionais, consulte este artigo http://blog.2muchcoffee.com/getting-current-state-in-angular2-router/ ou instale o ng2-router-helper a partir da npm
fonte
Para encontrar o pai da rota atual, você pode obter o
UrlTree
do roteador usando rotas relativas:Em seguida, para obter os segmentos da tomada principal:
fonte
A partir de agora, estou seguindo meu caminho da seguinte maneira:
Onde,
router
é uma instância deActivatedRoute
fonte
fonte
fonte
isso é simples, no angular 2 você só precisa importar a biblioteca do roteador como esta:
Em seguida, no construtor do componente ou serviço, você deve instancia-lo assim:
Em qualquer parte do código, seja em uma função, método, construção, qualquer que seja:
fonte
Você pode usar no arquivo .ts
fonte
essa pode ser sua resposta, use o método params da rota ativada para obter parâmetros do URL / rota que você deseja ler, abaixo está o snippet de demonstração
fonte
fonte
Se você precisar acessar o URL atual, normalmente precisará aguardar que NavigationEnd ou NavigationStart faça alguma coisa. Se você apenas se inscrever nos eventos do roteador, a assinatura produzirá muitos eventos no ciclo de vida da rota. Em vez disso, use um operador RxJS para filtrar apenas o evento que você precisa. O efeito colateral benéfico disso é agora que temos tipos mais rígidos!
fonte
Eu estava enfrentando o problema em que precisava do caminho da URL quando o usuário estava navegando no aplicativo ou acessando uma URL (ou atualizando em uma URL específica) para exibir componentes filhos com base na URL.
Além disso , quero um Observable que possa ser consumido no modelo, para que router.url não fosse uma opção. Nem a assinatura router.events porque o roteamento é acionado antes da inicialização do modelo do componente.
Espero que ajude, boa sorte!
fonte