Em artigos anteriores, demos uma visão geral do Angular . Na parte das instruções personalizadas, conseguimos escrevê-las, mas em cenários reais ainda precisamos de um gerenciamento padronizado.
Angular é uma versão atualizada do Angular.js. [Tutoriais relacionados recomendados: "Tutorial Angular"]
Portanto, neste artigo, usaremos Tooltip para explicar o conteúdo das instruções personalizadas.
Renderizações on-line, como segue:
A estrutura de diretórios
é baseada no projeto de código implementado no artigo anterior Execute a linha de comando:
# Entre na pasta de diretivas $ cd diretivas. #Criar pasta de dicas de ferramenta$ dica de ferramenta mkdir # Entre na pasta de dicas de ferramentas $ cd tooltip # Criar componente de dica de ferramenta $ ng gerar dica de ferramenta de componente # Criar diretiva de dica de ferramenta $ ng gerar diretiva dica de ferramenta
Depois de executar a linha de comando acima, você obterá a estrutura de diretórios de arquivos de app/directive/tooltip como segue:
dica de ferramenta ├── dica de ferramenta // componente de dica de ferramenta │ ├── user-list.component.html // esqueleto da página │ ├── user-list.component.scss // estilo exclusivo da página │ ├── especificação de user-list.component. .ts // Arquivo de teste │ └── user-list.component.ts // arquivo javascript ├── tooltip.directive.spec.ts // Arquivo de teste └── tooltip.directive.ts // Arquivo de diretiva
Bem, aqui Coloquei o componente no mesmo nível tooltip , principalmente para facilitar o gerenciamento. Claro que isso varia de pessoa para pessoa, você pode colocar na pasta components públicos.
Escreva o componente da dica de ferramenta
no arquivo html :
<div class="caret"></div>
<div class="tooltip-content">{{data.content}}</div> No arquivo de estilo .scss , existe:
$black: #000000;
$branco: #ffffff;
$ tamanho do cursor: 6px;
$tooltip-bg: transparenteize($black, 0.25); // transparente é a sintaxe do sass $grid-gutter-width: 30px;
$body-bg-color: $branco;
$app-anim-time: 200ms;
$app-anim-curve: facilidade;
$std-border-radius: 5px;
$zindex-max: 100;
// :host seletor de pseudoclasse, define o estilo do próprio elemento do componente: host {
posição: fixa;
preenchimento: $grid-gutter-width/3 $grid-gutter-width/2;
cor de fundo: $tooltip-bg;
cor: $body-bg-color;
opacidade: 0;
transição: tudo $app-anim-time $app-anim-curve;
alinhamento de texto: centro;
raio da borda: $std-raio da borda;
índice z: $zindex-max;
}
.caret { // largura do cursor: 0;
altura: 0;
borda esquerda: 6px sólido transparente;
borda direita: 6px sólido transparente;
borda inferior: 6px sólido $tooltip-bg;
posição: absoluta;
topo: -$ tamanho do cursor;
esquerda: 50%;
margem esquerda: -$caret-size/2;
cor da borda inferior: $tooltip-bg;
} Hmm~,
cssé uma coisa mágica, e vou organizar um artigo para explicar o conteúdo relacionadosass...
Então, o conteúdo do arquivo javascript tooltip.component.ts é o seguinte:
import {
Componente,
ElementRef, //O elemento aponta para HostBinding,
Em Destruir,
Ao iniciar
} de '@angular/core';
@Componente({
selector: 'app-tooltip', // Identificador, indicando como meu componente é chamado, aqui está app-tooltip
templateUrl: './tooltip.component.html', // O esqueleto deste componente styleUrls: ['./tooltip.component.scss'] // O estilo privado deste componente})
classe de exportação TooltipComponent implementa OnInit {
public data: any; // Atribuir um valor à diretiva private displayTimeOut: any;
// O decorador relacionado à ligação do host do próprio componente @HostBinding('style.top') hostStyleTop!: string;
@HostBinding('style.left') hostStyleLeft!: string;
@HostBinding('style.opacity') hostStyleOpacity!: string;
construtor(
elementoRef privado: ElementRef
) { }
ngOnInit(): void {
this.hostStyleTop = this.data.elementPosition.bottom + 'px';
if(this.displayTimeOut) {
clearTimeout(this.displayTimeOut)
}
this.displayTimeOut = setTimeout((_: qualquer) => {
// Calcule a distância entre a dica de ferramenta e o lado esquerdo aqui. A fórmula de cálculo aqui é: tooltip.left + .width do elemento alvo - (tooltip.width/2)
this.hostStyleLeft = this.data.elementPosition.left + this.data.element.clientWidth / 2 - this.elementRef.nativeElement.clientWidth / 2 + 'px'
this.hostStyleOpacity = '1';
this.hostStyleTop = this.data.elementPosition.bottom + 10 + 'px'
}, 500)
}
// Componente é destruído ngOnDestroy() {
// Depois que o componente for destruído, limpe o cronômetro para evitar vazamentos de memória if(this.displayTimeOut) {
clearTimeout(this.displayTimeOut)
}
}
} Escrever instruções de dicas de ferramentas
é o foco deste artigo. Marcarei as instruções específicas no código ~
O conteúdo do arquivo relevante tooltip.directive.ts é o seguinte:
import {.
ApplicationRef, // Detecção de chamada global ComponentFactoryResolver, // Cria o objeto componente ComponentRef, // A associação e orientação da instância do componente, apontando para o elemento criado pela Diretiva ComponentFactory, ElementRef,
EmbeddedViewRef, // EmbeddedViewRef herda de ViewRef e é usado para representar elementos de UI definidos em elementos de modelo.
HostListener, // escuta de evento DOM Injector, // entrada de injeção de dependência
} de '@angular/core';
importar { TooltipComponent } de './tooltip/tooltip.component';
@Diretiva({
seletor: '[appTooltip]'
})
classe de exportação TooltipDirective {
@Input("appTooltip") appTooltip!: string;
componenteRef privado!: ComponentRef<TooltipComponent>;
// Obtém a posição relativa do elemento alvo, como esquerda, direita, superior, inferior
obter posição do elemento() {
retornar this.elementRef.nativeElement.getBoundingClientRect();
}
construtor(
elementoRef protegido: ElementRef,
appRef protegido: ApplicationRef,
componenteFactoryResolver protegido: ComponentFactoryResolver,
injetor protegido: Injetor
) { }
//Cria dica de ferramenta
createTooltip protegido() {
this.componentRef = this.componentFactoryResolver
.resolveComponentFactory(TooltipComponent) // Vincular dica de ferramenta component.create(this.injector);
this.componentRef.instance.data = { // Vincular conteúdo de dados de dados: this.appTooltip,
elemento: this.elementRef.nativeElement,
elementPosition: this.elementPosition
}
this.appRef.attachView(this.componentRef.hostView); //Adicionar visualização const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
document.body.appendChild(domElem);
}
//Exclui dica de ferramenta
destruição protegidaTooltip() {
if(this.componentRef) {
this.appRef.detachView(this.componentRef.hostView); // Remove a visualização this.componentRef.destroy();
}
}
// Ouça o movimento do mouse em @HostListener('mouseover')
AoEnter() {
this.createTooltip();
}
// Ouve o movimento do mouse out@HostListener('mouseout')
OnOut() {
this.destroyTooltip();
}
} Neste ponto, 99% das funções foram concluídas. Agora podemos chamá-lo na página.
Na página, nos chamamos
para adicionar o seguinte conteúdo a user-list.component.html :
<p style="margin-top: 100px;">
<!-- [appTooltip]="'Hello Jimmy'" é o ponto chave-->
<span
[appTooltip]="'Olá Jimmy'"
style="margem esquerda: 200px; largura: 160px; alinhamento de texto: centro; preenchimento: 20px 0; exibição: bloco embutido; borda: 1px sólido #999;"
>Jimmy</span>
</p> Declaramos a instrução TooltipDirective em app.module.ts e podemos chamá-la diretamente. O efeito atual é o seguinte:
tooltip que implementamos é exibida na parte inferior central, que é o que normalmente usamos no framework, como o atributo bottom da tooltip no angular ant design . Para outros atributos, caso o leitor tenha interesse, eles podem ser ampliados.
Neste ponto, podemos manter bem os arquivos de instruções que escrevemos.