El aprendizaje angular habla sobre instrucciones y canalizaciones.

Directiva

Las directivas son formas proporcionadas por Angular操作DOM . Las instrucciones se dividen en属性指令e结构指令.

• Directiva de atributo: modifica la apariencia o el comportamiento de un elemento existente, envuélvelo con [] .

• Instrucciones estructurales: agregue y elimine nodos DOM para modificar el diseño, use * como prefijo de instrucción. [Tutoriales relacionados recomendados: "tutorial angular"]

1. Instrucción incorporada

1.1 *ngIf

渲染nodos DOM o移除nodos DOM según las condiciones.

<div *ngIf="data.length == 0">No más datos</div>

<div *ngIf="data.length > 0; luego dataList sino noData"></div>
<ng-template #dataList>Lista de cursos</ng-template>
<ng-template #noData>No más datos</ng-template>

ng-template se usa para definir plantillas. Después de usar ng-template para definir una plantilla, puede usar ng-container y templateOutlet para usarla.

<ng-plantilla #cargando>
 <botón (hacer clic)="login()">iniciar sesión</botón>
 <botón (click)="sigup()">sigup</botón>
</ng-plantilla>
<ng-contenedor *ngTemplateOutlet="cargando">
</ng-container>

1.2 [hidden]

显示nodos DOM u隐藏nodos DOM (mostrar) según las condiciones.

<div [hidden]="data.length == 0">Lista de cursos</div>
<div [hidden]="data.length > 0">No más datos</div>

1.3 *ngFor

atraviesa datos para generar

la interfaz de estructura HTML Lista {
  identificación: número
  nombre: cadena
  edad: número
}

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

<li
    *ngFor="
      dejar elemento de la lista;
      sea ​​i = índice;
      let isEven = par;
      let esImpar = impar;
      let isFirst = primero;
      let isLast = último;
    "
  >
  </li>

<li *ngFor="dejar elemento de la lista; trackBy: identificar"></li>

identificar(índice, elemento){
  devolver artículo.id; 
}

2. Requisitos de comando personalizados

: establezca el color de fondo predeterminado para el elemento, el color de fondo cuando el mouse se mueve hacia adentro y el color de fondo cuando el mouse se mueve hacia afuera.

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

importar { AfterViewInit, Directiva, ElementRef, HostListener, Entrada } desde "@angular/core"

// Recibir opciones de interfaz de tipo de parámetro {
  bgColor?: cadena
}

@Directiva({
  selector: "[aplicaciónHover]"
})
la clase de exportación HoverDirective implementa AfterViewInit {
  //Recibir parámetros @Input("appHover") appHover: Opciones = {}
  // Elemento de nodo DOM sobre el que se va a operar: HTMLElement
	// Obtener el nodo DOM que se va a operar en constructor(private elementRef: ElementRef) {
    this.element = this.elementRef.nativeElement
  }
	// Establece el color de fondo del elemento después de la finalización inicial de la plantilla del componente ngAfterViewInit() {
    this.element.style.backgroundColor = this.appHover.bgColor || "azul cielo"
  }
	// Agrega un evento de movimiento del mouse al elemento @HostListener("mouseenter") enter() {
    this.element.style.backgroundColor = "rosa"
  }
	//Agregar evento de mouse out para el elemento @HostListener("mouseleave") left() {
    this.element.style.backgroundColor = "azul cielo"
  }
}

Tubería

La función de la canalización es格式化组件模板数据.

1. Fecha de canalización incorporada

• formato de fecha

• moneda formato de moneda

• mayúsculas Convertir a

• mayúsculas minúsculas Convertir a minúsculas

• Formato json datos json

{{ fecha | fecha: "aaaa-MM-dd" }}

2. Requisitos de canalización personalizados

: la cadena especificada no puede exceder Longitud especificada

<!-- Este es un... -->
{{'Esto es una prueba' | resumen: 3}}

// resumen.pipe.ts
importar {Tubería, PipeTransform} desde '@angular/core';

@Tubo({
   nombre: 'resumen' 
});
clase de exportación SummaryPipe implementa PipeTransform {
    transformar (valor: cadena, ¿límite?: número) {
        si (!valor) devuelve nulo;
        let actualLimit = (límite): 50;
        valor de retorno.substr(0, límite actual) + '...';
    }
}

// aplicación.module.ts
importar {SummaryPipe} desde './summary.pipe'
@NgModule({
    declaraciones: [
      ResumenTubo
    ] 
});