การเรียนรู้เชิงมุมพูดถึงคำสั่งและไปป์ไลน์

คำสั่ง

คำสั่งคือวิธีที่ Angular จัดทำขึ้น操作DOM คำสั่งแบ่งออกเป็น属性指令และ结构指令

• คำสั่งแอตทริบิวต์: แก้ไขรูปลักษณ์หรือพฤติกรรมขององค์ประกอบที่มีอยู่ ล้อมด้วย []

• คำแนะนำเชิงโครงสร้าง: เพิ่มและลบโหนด DOM เพื่อแก้ไขเค้าโครง ใช้ * เป็นคำนำหน้าคำสั่ง [บทช่วยสอนที่เกี่ยวข้องที่แนะนำ: "บทช่วยสอนเชิงมุม"]

1. คำสั่งในตัว

1.1 *ngIf

渲染โหนด DOM หรือ移除โหนด DOM ตามเงื่อนไข

<div *ngIf="data.length == 0">ไม่มีข้อมูลอีกแล้ว</div>

<div *ngIf="data.length > 0; จากนั้น dataList จะเป็นอย่างอื่น 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-คอนเทนเนอร์ *ngTemplateOutlet="กำลังโหลด">
</ng-container>

1.2 [hidden]

显示โหนด DOM หรือ隐藏โหนด DOM (แสดง) ตามเงื่อนไข

<div [hidden]="data.length == 0">รายการหลักสูตร</div>
<div [hidden]="data.length > 0">ไม่มีข้อมูลอีกต่อไป</div>

1.3 *ngFor

การสำรวจข้อมูลเพื่อสร้าง

รายการอินเทอร์เฟซโครงสร้าง HTML {
  รหัส: หมายเลข
  ชื่อ: สตริง
  อายุ: หมายเลข
-

รายการ: รายการ[] = [
  { id: 1 ชื่อ: "จางซาน" อายุ: 20 }
  { id: 2 ชื่อ: "李思" อายุ: 30 }
]

<li
    *ngFor="
      ให้รายการของรายการ;
      ให้ i = ดัชนี;
      ให้ isEven = คู่;
      ให้ isOdd = คี่;
      ให้ isFirst = ก่อน;
      ให้ isLast = สุดท้าย;
    -
  -
  </li>

<li *ngFor="let item of list; trackBy: ระบุ"></li>

ระบุ(ดัชนี, รายการ){
  ส่งคืน item.id; 
}

2.

ข้อกำหนดคำสั่งแบบกำหนดเอง: ตั้งค่าสีพื้นหลังเริ่มต้นสำหรับองค์ประกอบ สีพื้นหลังเมื่อเมาส์เคลื่อนเข้า และสีพื้นหลังเมื่อเมาส์เคลื่อนออก

<div [appHover]="{ bgColor: 'skyblue' }">สวัสดี Angular</div>

นำเข้า { AfterViewInit, Directive, ElementRef, HostListener, Input } จาก "@เชิงมุม/core"

// รับตัวเลือกอินเทอร์เฟซประเภทพารามิเตอร์ {
  bgColor?: string
-

@คำสั่ง({
  ตัวเลือก: "[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.พื้นหลังสี = "สีชมพู"
  -
	//เพิ่มเหตุการณ์ mouse out สำหรับองค์ประกอบ @HostListener("mouseleave") leave() {
    this.element.style.พื้นหลังสี = "สีฟ้า"
  -
}

ท่อ

บทบาทของไปป์ไลน์คือ格式化组件模板数据

• รูป

• แบบ

• วัน

• ที่

• ไปป์

ไลน์ในตัว สกุล

{{ วันที่ | วันที่: "yyyy-MM-dd" }}

2.

ข้อกำหนดไปป์ไลน์ที่กำหนดเอง: สตริงที่ระบุต้องไม่เกิน ความยาวที่ระบุ

<!-- นี่คือ... -->
{{'นี่คือการทดสอบ' |. สรุป: 3}}

// summary.pipe.ts
นำเข้า { Pipe, PipeTransform } จาก '@ เชิงมุม/หลัก';

@ท่อ({
   ชื่อ: 'สรุป' 
-
คลาสส่งออก SummaryPipe ใช้ PipeTransform {
    แปลง (ค่า: สตริง, ขีด จำกัด ?: หมายเลข) {
        ถ้า (!value) ส่งกลับค่าว่าง;
        ให้ realLimit = (จำกัด) ? ขีดจำกัด : 50;
        return value.substr(0, realLimit) + '...';
    -
}

// app.module.ts
นำเข้า { SummaryPipe } จาก './summary.pipe'
@NgModule({
    ประกาศ: [
      สรุปPipe
    - 
-