|
|
Publicado em 25/10/2018 15:52:29
|
|
|
Introdução aos Comandos RouterLink
O comando RouterLink permite que você se conecte a uma parte específica do seu aplicativo. Se o link for estático, podemos usar o comando da seguinte forma:
Se você precisar gerar endereços de link com valores dinâmicos, pode passar um array de segmentos de caminho e depois os parâmetros para cada segmento. Por exemplo, usar um array de ['/team', teamId, 'user', userName, {details: true}] significa que queremos gerar um link para /team/11/user/bob; detalhes=verdadeiro 。
Múltiplos segmentos estáticos podem ser fundidos em um só, por exemplo: ['/team/11/user', userName, {details: true}].
O primeiro fragmento de caminho pode ser definido como /, ./ ou . / Início:
- Se começar com /, a rota começará a olhar para cima a partir da rota raiz
- Se começar com ./ ou não for usada, a rota começará a olhar para cima da rota filha que está ativa no momento para a rota
- Se você começar com: / começa, a rota vai para o próximo nível de busca
Você pode definir parâmetros de consulta e fragmentos das seguintes maneiras:
O comando RouterLink gerará o seguinte link com base nos parâmetros de entrada definidos acima: /user/bob#education?debug=true. Além disso, podemos declarar como lidar com parâmetros de consulta via a propriedade queryParamsHanding, as opções disponíveis são:
- merge - Molhar os parámômetros de consulta existentes nos parámetros atuais
- preserve - Salvar os consulyParams atuais
- padrão ('') - Usar apenas parâmetros de consulta
Exemplos específicos de uso são os seguintes:
Comando RouterLink explicado em detalhes
Definição de comando RouterLink
Propriedade de entrada de comandos RouterLink
Defina os parâmetros de consulta relacionados à URL
@Input() queryParams: {[k: string]: any};
Defina o fragmento de hash na URL
@Input() fragmento: corda;
Defina o modo de processamento dos parâmetros de consulta: mesclar, preservar e padrão
@Input() queryParamsHandling: QueryParamsHandling;
Define se devem manter os fragmentos
@Input() preserveFragmento: booleano;
Ao definir a navegação da página, se deve adicionar novos status ao histórico
@Input() skiplocatio{filter}nChange: boolean;
Ao configurar a navegação da página, se deve substituir o estado atual no histórico
@Input() replaceUrl: boolean;
Definir informações de parâmetros de comandos, por exemplo: ['/user/bob']
@Input()
set routerLink(comandos: any[]|string) {
if (comandos != null) {
this.commands = Array.isArray(comandos) ? comandos: [comandos];
} else {
this.commands = [];
}
}
Vinculação de comandos RouterLink
Vinculação de eventos
Classe RouterLink
@Attribute()
@Attribute('attributeName') decorador: Usado para obter o valor do atributo correspondente ao nome do atributo Nome no elemento host do comando.
tabindex
A propriedade tabindex especifica a ordem de controle da tecla tab de um elemento (quando a tecla tab é usada para navegação).
Os seguintes elementos suportam atributos tabindex: <a><area>, <button>, <input><object><select> , , , , e <textarea> .
sintaxe tabindex:
Classe RouterLink
Classe RouterLink
Comando RouterLinkWithHref
Diretiva RouterLinkWithHref
Propriedade de entrada da diretiva RouterLinkWithHref
Comando RouterLinkWithHref
Vinculação de atributos
<a> Tags definem hiperlinks que são usados para linkar de uma página para outra. <a> Existem dois atributos importantes nas tags:
HFE - especifica o endereço URL da página para a qual o link leva. Se você não usar o atributo href, não pode usar os seguintes atributos: download, media, rel, target e type.
Target - especifica como a página vinculada se abre na janela do navegador, e seus valores de parâmetros são principalmente os seguintes:
_blank - Carregue o documento de destino em uma nova janela do navegador.
_parent - Esse objetivo faz com que o documento carregue na janela ou conjunto de frames pai que contém o frame referenciado pelo hiperlink. Se essa referência estiver em uma janela ou em um framework de nível superior, então ela é equivalente ao _self alvo.
_self - O valor desse destino é o padrão para todas as etiquetas que não especificam <a> um alvo , o que faz com que o documento de destino seja carregado e exibido como o documento de origem no mesmo quadro ou janela. Esse destino é redundante e desnecessário, a menos que <base> seja usado com o atributo do alvo na aba de título do documento.
_top - Esse objetivo faz com que o documento carregue a janela contendo o hiperlink, e usando o _top alvo será apagado todos os quadros incluídos e carregado o documento em toda a janela do navegador.
Vinculação de eventos
MouseEvent representa um evento que ocorre quando um usuário interage com um dispositivo ponteiro (como um mouse), e eventos comuns incluem: clique, dblclick, mouseup e mousedown. O objeto MouseEvent contém um atributo botão que representa o botão do mouse pressionado pelo usuário, e os valores possíveis dos atributos são os seguintes:
- 0 - O botão principal é pressionado, geralmente referindo-se ao botão esquerdo do mouse.
- 1 - O botão auxiliar é pressionado, geralmente referindo-se à roda do mouse.
- 2 - A segunda tecla é pressionada, geralmente referindo-se ao botão direito do mouse.
- 3 - O quarto botão é pressionado, geralmente referindo-se ao botão de voltar do navegador.
- 4 - O quinto botão é pressionado, geralmente referindo-se ao botão de avançar do navegador.
Para um mouse configurado para uso canhoto, as teclas pressionadas serão o oposto. Nesse caso, o valor é lido da direita para a esquerda. No código de exemplo acima, também acessamos as propriedades ctrlKey e metaKey do objeto MouseEvent, que contêm as propriedades altKey e shiftKey além dessas duas propriedades. Esses atributos são descritos abaixo:
- MouseEvent.ctrlKey - retorna true se a tecla controle for pressionada quando o evento do mouse for acionado.
- MouseEvent.metaKey - retorna verdadeiro se a tecla (Window - ⊞, Mac - ⌘ Command) for pressionada quando o evento do mouse for acionado.
- MouseEvent.altKey - Retorna verdadeiro quando o evento do mouse é acionado se a tecla (Window - alt, Mac - Option, ou ⌥ ) for pressionada.
- MouseEvent.shiftKey - Retorna true se a tecla shift for pressionada quando um evento do mouse é acionado.
Se você pressionar ctrlKey e depois clicar na aba, uma <a> nova página de aba será criada usando o endereço URL atual. Se você apertar metaKey e clicar na <a> aba, a página atual será atualizada. Portanto, no método onClick(), o julgamento correspondente é realizado.
Ciclo de vida do comando RouterLinkWithHref
ngOnChanges()
ngOnDestroy()
Classe RouterLinkWithHref
Classe RouterLinkWithHref
Classe RouterLinkWithHref
Introdução ao comando RouterLinkActive
A diretiva RouterLinkActive permite adicionar classes CSS a um elemento quando a rota vinculada se torna ativa. Veja o seguinte exemplo:
Quando o endereço URL é /user ou /user/bob, a classe active-link será adicionada <a> à tag. Se a URL mudar, a classe active-link é automaticamente removida da <a> tag. Você também pode adicionar várias classes ao mesmo tempo, da seguinte forma:
Ao aplicar o comando routerLinkActive, você também pode usar o parâmetro routerLinkActiveOptions para configurar como as URLs são combinadas, da seguinte forma:
Quando o parâmetro {exact: true} é configurado, a classe active-link só é adicionada à tag se o endereço URL corresponder <a> exatamente a . Você também pode atribuir uma instância RouterLinkActive a uma variável template e verificar o status isActive das diretivas de comando:
Por fim, você também pode aplicar o comando RouterLinkActive ao elemento pai do RouterLink. Exemplos incluem:
No exemplo acima, quando a URL é endereçada como /user/jim ou /user/bob, a classe active-link é adicionada <div> ao elemento correspondente.
Comando RouterLinkActive explicado em detalhes
Definição do comando RouterLinkActive
Propriedade de entrada do comando RouterLinkActive
Ciclo de vida do comando RouterLinkActive
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
Classe RouterLinkActive
Classe RouterLinkActive
Classe RouterLinkActive
|
Anterior:Tem uma função aqui que é muito boa, você pode ganhar dinheiro, é promoção.Próximo:Lançou um plugin DZ online payment free-contract, disponível para testes pessoais.
|
