เรียกการตรวจจับการเปลี่ยนแปลงด้วยตนเองในเชิงมุม

Mode(): stringผมเขียนเป็นองค์ประกอบเชิงมุมที่มีคุณสมบัติ

ฉันต้องการที่จะสามารถตั้งค่าคุณสมบัตินี้โดยทางโปรแกรมไม่ได้ตอบสนองต่อเหตุการณ์ใด ๆ

ปัญหาคือในกรณีที่ไม่มีเหตุการณ์ของเบราว์เซอร์การเชื่อมโยงแม่แบบ{{Mode}}จะไม่ปรับปรุง

มีวิธีที่จะทริกเกอร์การตรวจจับการเปลี่ยนแปลงนี้ด้วยตนเองหรือไม่?

ลองหนึ่งในสิ่งเหล่านี้:

• ApplicationRef.tick()- คล้ายกับ AngularJS's $rootScope.$digest()- เช่นตรวจสอบโครงสร้างส่วนประกอบแบบเต็ม
• NgZone.run(callback)- คล้ายกับ$rootScope.$apply(callback)- คือประเมินฟังก์ชันการโทรกลับภายในโซนแองกูลาร์ ฉันคิดว่า แต่ฉันไม่แน่ใจว่าสิ่งนี้จบลงที่การตรวจสอบโครงสร้างส่วนประกอบแบบเต็มหลังจากดำเนินการฟังก์ชันการเรียกกลับ
• ChangeDetectorRef.detectChanges()- คล้ายกับ$scope.$digest()- เช่นตรวจสอบเฉพาะส่วนนี้และลูก ๆ

คุณสามารถฉีดApplicationRef, NgZoneหรือChangeDetectorRefเข้าองค์ประกอบของคุณ

ฉันใช้การอ้างอิงคำตอบที่ยอมรับได้และต้องการยกตัวอย่างเนื่องจากเอกสารประกอบของ Angular 2 นั้นอ่านยากมากฉันหวังว่ามันจะง่ายขึ้น:

1. นำเข้าNgZone:

   import { Component, NgZone } from '@angular/core';
   

2. เพิ่มไปยังตัวสร้างคลาสของคุณ

   constructor(public zone: NgZone, ...args){}
   

3. เรียกใช้รหัสด้วยzone.run:

   this.zone.run(() => this.donations = donations)
   

ฉันสามารถอัปเดตด้วยmarkForCheck ()

นำเข้า ChangeDetectorRef

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

ฉีดและยกตัวอย่างมัน

constructor(private ref: ChangeDetectorRef) { 
}

ในที่สุดก็ทำเครื่องหมายการตรวจจับการเปลี่ยนแปลงที่จะเกิดขึ้น

this.ref.markForCheck();

นี่คือตัวอย่างที่ markForCheck () ใช้งานได้และ detectChanges () ไม่ทำงาน

https://plnkr.co/edit/RfJwHqEVJcMU9ku9XNE7?p=preview

แก้ไข: ตัวอย่างนี้ไม่ได้แสดงให้เห็นปัญหาอีกต่อไป :( ฉันเชื่อว่ามันอาจจะใช้รุ่น Angular ที่ใหม่กว่าซึ่งมันได้รับการแก้ไข

(กด STOP / RUN เพื่อเรียกใช้อีกครั้ง)

ใน Angular 2+ ให้ลอง @ decor มัณฑนากร

จะช่วยให้การผูกคุณสมบัติที่ดีบางอย่างระหว่างองค์ประกอบหลักและเด็ก

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

ถัดไปสร้างตัวแปรโกลบอลในชายด์เพื่อเก็บอ็อบเจ็กต์ / คุณสมบัติที่ส่งผ่านจากพาเรนต์

จากนั้นใน parent html ที่มีการใช้แม่แบบลูกให้เพิ่มสัญกรณ์วงเล็บเหลี่ยมด้วยชื่อของตัวแปรลูกแล้วตั้งค่าให้เท่ากับชื่อของตัวแปรหลัก ตัวอย่าง:

<child-component-template [childVariable] = parentVariable>
</child-component-template>

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

@Input()
public childVariable: any

เมื่อตัวแปรพาเรนต์ของคุณได้รับการอัปเดตควรส่งการอัปเดตไปยังองค์ประกอบย่อยซึ่งจะอัปเดต html

นอกจากนี้หากต้องการเรียกใช้ฟังก์ชันในองค์ประกอบลูกลองดูที่ ngOnChanges

ChangeDetectorRef.detectChanges () - คล้ายกับ $ scope $ digest () - เช่นให้ตรวจสอบเฉพาะส่วนนี้และลูก ๆ