يتحدث التعلم الزاوي عن التواصل بين المكونات ودورة حياة المكونات

التواصل بين المكونات

1. قم بتمرير البيانات إلى المكون

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

// Favorite.component.ts
استيراد {الإدخال} من '@angular/core'؛
فئة التصدير FavoriteComponent {
    @Input() مفضل: boolean = false;
}

[توصية برنامج تعليمي ذي صلة: "برنامج تعليمي زاوي"]

ملاحظة: إضافة [] خارج السمة يعني ربط قيمة ديناميكية، بعد استلامها في المكون، فهي من النوع المنطقي. عدم إضافة [] يعني ربط قيمة عادية بعد الاستلام في المكون، هو字符串类型.

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

import { Input } from '@angular/core';

فئة التصدير FavoriteComponent {
  @Input("is-Favorite") isFavorite: boolean = false
}

2. يحتاج المكون

إلى نقل البيانات إلى الخارج: قم بتمرير البيانات إلى المكون الأصلي عن طريق النقر فوق الزر الموجود في المكون الفرعي

<!-- قالب المكون الفرعي-->
<button (click)="onClick()">click</button>

// فئة المكون الفرعي import { EventEmitter, Output } from "@angular/core"

فئة التصدير FavoriteComponent {
  @Output() تغيير = EventEmitter() جديد
  عند النقر () {
    this.change.emit({ الاسم: "زانغ سان" })
  }
}

<!-- قالب المكون الأصلي -->
<app-favorite (change)="onChange($event)"></app-favorite>

// فئة المكون الأصلي فئة التصدير AppComponent {
  onChange(الحدث: {الاسم: سلسلة }) {
    console.log(الحدث)
  }
}

دورة حياة المكون

1. مرحلة التثبيت

يتم تنفيذ وظيفة دورة الحياة لمرحلة التثبيت مرة واحدة فقط أثناء مرحلة التثبيت ولم تعد يتم تنفيذها عند تحديث البيانات.

1). يتم تنفيذ المُنشئ

Angular عند إنشاء فئة المكون ويمكن استخدامه لتلقي كائن مثيل الخدمة الذي تم حقنه بواسطة Angular.

فئة التصدير ChildComponent {
  منشئ (اختبار خاص: TestService) {
    console.log(this.test) // "اختبار"
  }
}

2)،

يتم تنفيذ ngOnInit بعد تلقي قيمة سمة الإدخال لأول مرة، ويمكن تنفيذ العملية المطلوبة هنا.

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

فئة التصدير ChildComponent تنفذ OnInit {
  @Input("name") الاسم: السلسلة = ""
  نجونينيت () {
    console.log(this.name) // "تشانغ سان"
  }
}

3)،

يتم استدعاء ngAfterContentInit بعد اكتمال العرض الأولي لعرض المحتوى.

<التطبيق-الطفل>
	<div #box>مرحبًا أنجولار</div>
</app-child>

فئة التصدير ChildComponent تنفذ AfterContentInit {
  @ContentChild("box") box: ElementRef<HTMLDivElement> |

  ngAfterContentInit() {
    console.log(this.box) // <div>مرحبًا Angular</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

عندما تتغير قيمة سمة

• الإدخال

• ، ويتم تنفيذها أيضًا مرة واحدة أثناء الإعداد الأولي

• سيتم تنفيذه مرة واحدة فقط، وسيتم تخزين القيم المتغيرة في نفس الوقت، في المعلمات،

• نوع المعلمة هو SimpleChanges ونوع الخاصية الفرعية هو

• SimpleChange تغييرات القيمة

• بالنسبة لأنواع البيانات المرجعية، يمكنها اكتشاف التغيير من كائن إلى آخر، لكن لا يمكن للاكتشاف أن تؤثر التغييرات في قيم الخصائص في نفس الكائن على بيانات تحديث قالب المكون.

تتغير قيمة نوع البيانات الأساسية

<app-child [name]="name" [age]="age"></app-child>
<button (click)="change()">تغيير</button>

فئة التصدير AppComponent {
  الاسم: سلسلة = "تشانغ سان"؛
  العمر : العدد = 20
  يتغير() {
    this.name = "李思"
    هذا العمر = 30
  }
}

فئة التصدير ChildComponent تنفذ OnChanges {
  @Input("name") الاسم: السلسلة = ""
  @Input("age") العمر: الرقم = 0

  ngOnChanges(التغييرات: SimpleChanges) {
    console.log("يمكن اكتشاف التغييرات في قيم نوع البيانات الأساسية")
  }
}

تغيير نوع البيانات المرجعية

<app-child [person]="person"></app-child>
<button (click)="change()">تغيير</button>

فئة التصدير AppComponent {
  الشخص = { الاسم: "张三"، العمر: 20 }
  يتغير() {
    this.person = { الاسم: "李思"، العمر: 30 }
  }
}

فئة التصدير ChildComponent تنفذ OnChanges {
  @Input("person") شخص = { الاسم: ""، العمر: 0 }

  ngOnChanges(التغييرات: SimpleChanges) {
    console.log("بالنسبة لأنواع البيانات المرجعية، يمكن اكتشاف التغييرات في العنوان المرجعي فقط، ولا يمكن اكتشاف التغييرات في سمات الكائن")
  }
}

2)، ngDoCheck: يستخدم بشكل أساسي لتصحيح الأخطاء، طالما أن سمات الإدخال تتغير، سواء كان نوع بيانات أساسي، أو نوع بيانات مرجعي، أو تغيير سمة في نوع بيانات مرجعي، فسيتم تنفيذه.

3)، ngAfterContentChecked: يتم تنفيذه بعد اكتمال تحديث عرض المحتوى.

4)، ngAfterViewChecked: يتم تنفيذه بعد تحديث عرض المكون.

3. مرحلة إلغاء التثبيت

1)،

يتم استدعاء ngOnDestroy قبل تدمير المكون واستخدامه في عمليات التنظيف.

فئة التصدير HomeComponent تنفذ OnDestroy {
  نجونديستروي() {
    console.log("تم إلغاء تثبيت المكون")
  }
}