يتحدث التعلم الزاوي عن التعليمات وخطوط الأنابيب

التوجيه

التوجيهات هي طرق توفرها Angular操作DOM . تنقسم التعليمات إلى属性指令结构指令.

• توجيه السمة: تعديل مظهر أو سلوك عنصر موجود، وتغليفه بـ [] .

• التعليمات الهيكلية: قم بإضافة عقد DOM وحذفها لتعديل التخطيط، واستخدم * كبادئة للتعليمات. [البرامج التعليمية ذات الصلة الموصى بها: "البرنامج التعليمي الزاوي"]

1. التعليمات المضمنة

1.1 *ngIf

渲染عقد DOM أو移除عقد DOM بناءً على الشروط.

<div *ngIf="data.length == 0">لا مزيد من البيانات</div>

<div *ngIf="data.length > 0; ثم قائمة البيانات else noData"></div>
<ng-template #dataList>قائمة الدورات التدريبية</ng-template>
<ng-template #noData>لا مزيد من البيانات</

ng-template> يتم استخدام ng-template لتحديد القوالب بعد استخدام ng-template لتحديد قالب، يمكنك استخدام تعليمات ng-container و templateOutlet لاستخدامه.

<ng-قالب #تحميل>
 <button (click)="login()">تسجيل الدخول</button>
 <button (click)="sigup()">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 {
  المعرف: الرقم
  الاسم: سلسلة
  العمر: الرقم
}

القائمة: القائمة[] = [
  { المعرف: 1، الاسم: "زانغ سان"، العمر: 20 }،
  { المعرف: 2، الاسم: "李思"، العمر: 30 }
]

<لي
    *نجفور ="
      اسمحوا عنصر القائمة؛
      دعني = الفهرس؛
      دع isEven = حتى؛
      دع isOdd = غريب؛
      Let isFirst = first;
      دع isLast = last;
    "
  >
  </li>

<li *ngFor="السماح بعنصر القائمة؛ TrackBy: تحديد"></li>

تحديد(index, item){
  إرجاع item.id; 
}

2. متطلبات الأوامر المخصصة

: قم بتعيين لون الخلفية الافتراضي للعنصر، ولون الخلفية عندما يتحرك الماوس للداخل، ولون الخلفية عندما يتحرك الماوس للخارج.

<div [appHover]="{ bgColor: 'skyblue' }">مرحبًا Angular</div>

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

// تلقي خيارات واجهة نوع المعلمة {
  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 || "skyblue".
  }
	// أضف حدث تحريك الماوس إلى العنصر @HostListener("mouseenter") enter() {
    this.element.style.backgroundColor = "وردي"
  }
	// أضف حدث إخراج الماوس للعنصر @HostListener("mouseleave") leave() {
    this.element.style.backgroundColor = "السماء الزرقاء"
  }
}

الأنابيب

يتمثل دور خط الأنابيب格式化组件模板数据.

• 1.

• تنسيق

• تاريخ

• خط

• الأنابيب

المدمج

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

2. متطلبات خط الأنابيب المخصصة

: لا يمكن أن تتجاوز السلسلة المحددة الطول المحدد

<!-- هذا... -->
{{'هذا اختبار' |. ملخص: 3}}

// Summary.pipe.ts
استيراد { Pipe, PipeTransform } من '@angular/core';

@ماسورة({
   الاسم: "ملخص" 
});
فئة التصدير SummaryPipe تنفذ PipeTransform {
    تحويل (القيمة: سلسلة، الحد؟: رقم) {
        إذا كانت (! القيمة) تُرجع فارغة؛
        دع الحد الفعلي = (الحد) ?
        قيمة الإرجاع.substr(0, الفعليLimit) + '...';
    }
}

// app.module.ts
استيراد { SummaryPipe } من "./summary.pipe"
@NgModule({
    تصريحات: [
      SummaryPipe
    ] 
});