O aprendizado angular fala sobre instruções e pipelines

Diretiva

Diretivas são formas fornecidas pelo Angular操作DOM . As instruções são divididas em属性指令e结构指令.

• Diretiva de atributo: Modifique a aparência ou comportamento de um elemento existente, envolva-o com [] .

• Instruções estruturais: adicione e exclua nós DOM para modificar o layout, use * como prefixo de instrução. [Tutoriais relacionados recomendados: "tutorial angular"]

1. Instrução integrada

1.1 *ngIf

渲染nós DOM ou移除nós DOM com base nas condições.

<div *ngIf="data.length == 0">Não há mais dados</div>

<div *ngIf="data.length > 0; then dataList else noData"></div>
<ng-template #dataList>Lista de cursos</ng-template>
<ng-template #noData>Não há mais dados</ng-template>

ng-template é usado para definir modelos. Depois de usar ng-template para definir um modelo, você pode usar ng-container e templateOutlet para usá-lo.

<ng-modelo #carregando>
 <button (click)="login()">login</button>
 <button (click)="sigup()">sigup</button>
</ng-template>
<ng-container *ngTemplateOutlet="carregando">
</ng-container>

1.2 [hidden]

显示nós DOM ou隐藏nós DOM (exibir) de acordo com as condições.

<div [hidden]="data.length == 0">Lista de cursos</div>
<div [hidden]="data.length > 0">Não há mais dados</div>

1.3 *ngFor

percorre dados para gerar estrutura HTML

interface List {
  id: número
  nome: string
  idade: número
}

lista: Lista[] = [
  {id: 1, nome: "Zhang San", idade: 20},
  { id: 2, nome: "李思", idade: 30 }
]

<li
    *ngFor="
      deixe o item da lista;
      seja i = índice;
      deixe isEven = par;
      deixe isOdd = ímpar;
      deixe isPrimeiro = primeiro;
      deixe isLast = último;
    "
  >
  </li>

<li *ngFor="let item da lista; trackBy: identificar"></li>

identificar(index, item){
  retornar item.id; 
}

2. Requisitos de comando personalizados

: Defina a cor de fundo padrão para o elemento, a cor de fundo quando o mouse se move para dentro e a cor de fundo quando o mouse se move para fora.

<div [appHover]="{ bgColor: 'skyblue' }">Olá Angular</div>

importar { AfterViewInit, Diretiva, ElementRef, HostListener, Input } de "@angular/core"

// Recebe o tipo de parâmetro interface Options {
  bgColor?: string
}

@Diretiva({
  seletor: "[appHover]"
})
classe de exportação HoverDirective implementa AfterViewInit {
  //Recebe parâmetros @Input("appHover") appHover: Options = {}
  // Elemento do nó DOM a ser operado: HTMLElement
	// Faz com que o nó DOM seja operado em constructor(private elementRef: ElementRef) {
    este.element = este.elementRef.nativeElement
  }
	// Defina a cor de fundo do elemento após a conclusão inicial do modelo de componente ngAfterViewInit() {
    this.element.style.backgroundColor = this.appHover.bgColor || "céu azul"
  }
	// Adiciona um evento de movimento do mouse ao elemento @HostListener("mouseenter") enter() {
    this.element.style.backgroundColor = "rosa"
  }
	//Adiciona evento de saída do mouse para o elemento @HostListener("mouseleave") leave() {
    this.element.style.backgroundColor = "céu azul"
  }
}

Cano

A função do pipeline é格式化组件模板数据.

1. Formato de data do pipeline integrado

• ,

• formato de moeda,

• maiúsculas Converter para

• letras minúsculas Converter para minúsculas

• Formato json dados json

{{data | data: "yyyy-MM-dd" }}

2. Requisitos de pipeline personalizados

: a string especificada não pode exceder Comprimento especificado

<!-- Este é um... -->
{{'Este é um teste' | resumo: 3}}

// summary.pipe.ts
importar {Pipe, PipeTransform} de '@angular/core';

@Cano({
   nome: 'resumo' 
});
classe de exportação ResumoPipe implementa PipeTransform {
    transformar (valor: string, limite?: número) {
        if (!value) retornar nulo;
        deixe actualLimit = (limite)?
        return valor.substr(0, actualLimit) + '...';
    }
}

//app.module.ts
importar { SummaryPipe } de './summary.pipe'
@NgModule({
    declarações: [
      ResumoPipe
    ] 
});