Обучение Angular рассказывает об инструкциях и конвейерах

Директива

Директивы — это способы, предоставляемые Angular操作DOM . Инструкции делятся на属性指令и结构指令.

• Директива атрибута: измените внешний вид или поведение существующего элемента, обернув его [] .

• Структурные инструкции: добавляйте и удаляйте узлы DOM для изменения макета, используйте * в качестве префикса инструкций. [Рекомендуемые связанные учебные пособия: «учебник по angular»]

1. Встроенная инструкция

1.1 *ngIf

渲染узлы DOM или移除узлы DOM в зависимости от условий.

<div *ngIf="data.length == 0">Нет данных</div>

<div *ngIf="data.length > 0; then dataList else noData"></div>
<ng-template #dataList>Список курсов</ng-template>
<ng-template #noData>Нет данных</ng-template>

ng-template используется для определения шаблонов. После использования ng-template для определения шаблона вы можете использовать инструкции ng-container и templateOutlet .

<ng-шаблон #loading>
 <button (click)="login()">войти</button>
 <button (click)="sigup()">подписаться</button>
</ng-шаблон>
<ng-container *ngTemplateOutlet="loading">
</ng-container>

1.2 [hidden]

显示узлов DOM или隐藏узлов DOM (отображение) в зависимости от условий.

<div [hidden]="data.length == 0">Список курсов</div>
<div [hidden]="data.length > 0">Данных больше нет</div>

1.3 *ngFor

обходит данные для создания

интерфейса структуры HTML List {
  идентификатор: номер
  имя: строка
  возраст: номер
}

список: Список[] = [
  { id: 1, имя: «Чжан Сан», возраст: 20 },
  { id: 2, имя: "李思", возраст: 30 }
]

<ли
    *ngFor="
      пусть элемент списка;
      пусть я = индекс;
      пусть isEven = четный;
      пусть isOdd = нечетный;
      пусть isFirst = первый;
      пусть isLast = последний;
    "
  >
  </li>

<li *ngFor="let элемент списка; trackBy:identify"></li>

define(index, item){
  вернуть элемент.id; 
}

2. Требования к пользовательской команде

: установите цвет фона по умолчанию для элемента, цвет фона при перемещении мыши и цвет фона при ее перемещении.

<div [appHover]="{ bgColor: 'skyblue' }">Привет, Angular</div>

import { AfterViewInit, Directive, ElementRef, HostListener, Input } from "@angular/core"

// Интерфейс типа параметра получения Options {
  bgColor?: строка
}

@Директива({
  селектор: "[appHover]"
})
класс экспорта HoverDirective реализует AfterViewInit {
  //Получаем параметры @Input("appHover") appHover: Options = {}
  // Элемент узла DOM, над которым нужно работать: HTMLElement
	// Получение узла DOM для работы с конструктором (private elementRef: ElementRef) {
    this.element = this.elementRef.nativeElement
  }
	// Устанавливаем цвет фона элемента после первоначального завершения шаблона компонента ngAfterViewInit() {
    this.element.style.backgroundColor = this.appHover.bgColor || "небесно-голубой"
  }
	// Добавляем событие перемещения мыши к элементу @HostListener("mouseenter") enter() {
    this.element.style.backgroundColor = "розовый"
  }
	//Добавляем событие выхода мыши для элемента @HostListener("mouseleave") Leave() {
    this.element.style.backgroundColor = "небесно-голубой"
  }
}

Трубка

Роль конвейера заключается格式化组件模板数据.

1. Встроенный

• формат даты

конвейера

• . Валюта. Формат валюты

• . Прописные буквы. Преобразовать в

• нижний регистр. Преобразовать в нижний регистр.

• Формат данных json.

{{ date | date: "гггг-ММ-дд" }}

2. Требования к пользовательскому конвейеру

: указанная строка не может превышать Указанная длина

<!-- Это... -->
{{'Это тест' | резюме: 3}}

// summary.pipe.ts
import { Pipe, PipeTransform } из '@angular/core';

@Трубка({
   имя: 'резюме' 
});
класс экспорта SummaryPipe реализует PipeTransform {
    преобразование (значение: строка, предел?: число) {
        if (!value) возвращает ноль;
        пусть factLimit = (ограничение)? Ограничение: 50;
        возвращаемое значение.substr(0, factLimit) + '...';
    }
}

// приложение.модуль.ts
импортировать {SummaryPipe} из './summary.pipe'
@NgModule({
    декларации: [
      СводкаТруба
    ] 
});