Aprendizado angular usando dica de ferramenta como exemplo para entender instruções personalizadas

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 relacionado sass ...

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.