การเรียนรู้เชิงมุมพูดถึงการสื่อสารส่วนประกอบและวงจรชีวิตของส่วนประกอบ

การสื่อสารส่วนประกอบ

1. ส่งข้อมูลไปยังส่วนประกอบ

<app-favorite [isFavorite]="true"></app-favorite>

// favorite.component.ts
นำเข้า { อินพุต } จาก '@ เชิงมุม/หลัก';
ส่งออกคลาส FavoriteComponent {
    @Input() isFavorite: boolean = false;
}

[คำแนะนำการสอนที่เกี่ยวข้อง: "บทช่วยสอนเชิงมุม"]

หมายเหตุ: การเพิ่ม [] [] นอกแอตทริบิวต์หมายถึงการเชื่อมโยงค่าไดนามิก หลังจากได้รับแล้ว มันเป็นประเภทบูลีน ในองค์ประกอบเป็น字符串类型

<app-favorite [is-Favorite]="true"></app-favorite>

import { Input } จาก '@ เชิงมุม/core';

ส่งออกคลาส FavoriteComponent {
  @Input("is-Favorite") isFavorite: boolean = false
}

2. ส่วนประกอบ

จำเป็นต้องถ่ายโอนข้อมูลไปยังภายนอก: ส่งข้อมูลไปยังส่วนประกอบหลักโดยคลิกปุ่มในองค์ประกอบย่อย

<!-- เทมเพลตองค์ประกอบย่อย-->
<button (click)="onClick()">คลิก</button>

// การนำเข้าคลาสองค์ประกอบย่อย { EventEmitter, Output } จาก "@เชิงมุม/core"

ส่งออกคลาส FavoriteComponent {
  @Output() เปลี่ยน = ใหม่ EventEmitter()
  onClick() {
    this.change.emit ({ ชื่อ: "จางซาน" })
  -
}

<!-- เทมเพลตส่วนประกอบหลัก -->
<app-favorite (change)="onChange($event)"></app-favorite>

// คลาสส่งออกคลาสองค์ประกอบหลัก AppComponent {
  onChange (เหตุการณ์: { ชื่อ: สตริง }) {
    console.log (เหตุการณ์)
  -
}

วงจรชีวิตของส่วนประกอบ

1. เฟสการติดตั้ง

ฟังก์ชันวงจรชีวิตของเฟสการติดตั้งจะดำเนินการเพียงครั้งเดียวในระหว่างเฟสการติดตั้ง และจะไม่ดำเนินการอีกต่อไปเมื่อมีการอัพเดตข้อมูล

1) Constructor

Angular จะถูกดำเนินการเมื่อสร้างอินสแตนซ์ของคลาสส่วนประกอบและสามารถใช้เพื่อรับวัตถุอินสแตนซ์บริการที่ฉีดโดย Angular

ส่งออกคลาส ChildComponent {
  ตัวสร้าง (การทดสอบส่วนตัว: TestService) {
    console.log(this.test) // "ทดสอบ"
  -
}

2) ngOnInit

จะถูกดำเนินการหลังจากได้รับค่าแอตทริบิวต์อินพุตเป็นครั้งแรก และสามารถดำเนินการที่ร้องขอได้ที่นี่

<app-child name="Zhang San"></app-child>

คลาสการส่งออก ChildComponent ใช้ OnInit {
  @Input("ชื่อ") ชื่อ: string = ""
  ngOnInit() {
    console.log(this.name) // "จางซาน"
  -
}

3) ngAfterContentInit

จะถูกเรียกหลังจากการเรนเดอร์เริ่มต้นของการฉายภาพเนื้อหาเสร็จสิ้น

<แอปลูก>
	<div #box>สวัสดีเชิงมุม</div>
</app-child>

คลาสการส่งออก ChildComponent ใช้ AfterContentInit {
  @ContentChild("box") กล่อง: ElementRef<HTMLDivElement> |

  ngAfterContentInit() {
    console.log(this.box) // <div>สวัสดีเชิงมุม</div>
  -
}

4) ngAfterViewInit

จะถูกเรียกหลังจากแสดงผลมุมมองส่วนประกอบ

<!-- เทมเพลตส่วนประกอบแอปลูก -->
<p #p>app-child ทำงาน</p>

คลาสส่งออก ChildComponent ใช้ AfterViewInit {
  @ViewChild("p") p: ElementRef<HTMLParagraphElement> |
  ngAfterViewInit () {
    console.log(this.p) // <p>แอปลูกใช้งานได้</p>
  -
}

2. อัปเดตเฟส

1) ngOnChanges

• จะถูกดำเนินการเมื่อค่าแอตทริบิวต์อินพุตเปลี่ยนแปลง และยังถูกดำเนินการหนึ่งครั้งในระหว่างการตั้งค่าเริ่มต้น ลำดับนั้นดีกว่า ngOnInit

• ไม่ว่าแอตทริบิวต์อินพุตจะเปลี่ยนแปลงไปกี่รายการในเวลาเดียวกัน ฟังก์ชัน hook จะทำงาน ดำเนินการเพียงครั้งเดียวและค่าที่เปลี่ยนแปลงจะถูกจัดเก็บพร้อมกัน ในพารามิเตอร์

• ประเภทพารามิเตอร์คือ SimpleChanges และประเภทคุณสมบัติย่อยคือ SimpleChange

• สำหรับประเภทข้อมูลพื้นฐานสามารถตรวจพบได้ตราบเท่าที่ การเปลี่ยนแปลงค่า

• . สำหรับประเภทข้อมูลอ้างอิงสามารถตรวจจับการเปลี่ยนแปลงจากวัตถุหนึ่งไปอีกวัตถุหนึ่งได้ แต่การตรวจจับไม่สามารถเปลี่ยนแปลงค่าคุณสมบัติในวัตถุเดียวกันได้ไม่ส่งผลกระทบต่อข้อมูลการอัพเดตเทมเพลตส่วนประกอบ

ค่าประเภทข้อมูลพื้นฐานเปลี่ยนแปลง

<app-child [name]="name" [age]="age"></app-child>
<button (click)="change()">เปลี่ยน</button>

ส่งออกคลาส AppComponent {
  ชื่อ: string = "จางซาน";
  อายุ: หมายเลข = 20
  เปลี่ยน() {
    this.name = "李思"
    อายุ = 30
  -
}

คลาสการส่งออก ChildComponent ใช้ OnChanges {
  @Input("ชื่อ") ชื่อ: string = ""
  @Input("อายุ") อายุ: จำนวน = 0

  ngOnChanges (การเปลี่ยนแปลง: การเปลี่ยนแปลงอย่างง่าย) {
    console.log("สามารถตรวจพบการเปลี่ยนแปลงค่าชนิดข้อมูลพื้นฐานได้")
  -
}

การเปลี่ยนแปลงประเภทข้อมูลอ้างอิง

<app-child [person]="person"></app-child>
<button (click)="change()">เปลี่ยน</button>

ส่งออกคลาส AppComponent {
  คน = { ชื่อ: "张三" อายุ: 20 }
  เปลี่ยน() {
    this.person = { ชื่อ: "李思" อายุ: 30 }
  -
}

คลาสการส่งออก ChildComponent ใช้ OnChanges {
  @Input("บุคคล") คน = { ชื่อ: "" อายุ: 0 }

  ngOnChanges (การเปลี่ยนแปลง: การเปลี่ยนแปลงอย่างง่าย) {
    console.log("สำหรับประเภทข้อมูลอ้างอิง สามารถตรวจพบได้เฉพาะการเปลี่ยนแปลงในที่อยู่อ้างอิงเท่านั้น ไม่สามารถตรวจพบการเปลี่ยนแปลงในแอตทริบิวต์ของวัตถุได้")
  -
}

2), ngDoCheck: ส่วนใหญ่ใช้สำหรับการดีบัก ตราบใดที่แอตทริบิวต์อินพุตเปลี่ยนแปลง ไม่ว่าจะเป็นประเภทข้อมูลพื้นฐาน ประเภทข้อมูลอ้างอิง หรือการเปลี่ยนแปลงแอตทริบิวต์ในประเภทข้อมูลอ้างอิง ก็จะถูกดำเนินการ

3), ngAfterContentChecked: ดำเนินการหลังจากการอัพเดตการฉายเนื้อหาเสร็จสิ้น

4), ngAfterViewChecked: ดำเนินการหลังจากอัปเดตมุมมองส่วนประกอบแล้ว

3. การถอนการติดตั้งเฟส

1) ngOnDestroy

จะถูกเรียกก่อนที่ส่วนประกอบจะถูกทำลาย และใช้สำหรับการดำเนินการล้างข้อมูล

คลาสส่งออก HomeComponent ใช้ OnDestroy {
  ngOnDestroy() {
    console.log("ถอนการติดตั้งคอมโพเนนต์แล้ว")
  -
-