วิธีการตรวจสอบเมื่อมีการเปลี่ยนแปลงค่า @Input () ในเชิงมุม?

ฉันมีองค์ประกอบหลัก ( CategoryComponent ), องค์ประกอบย่อย ( videoListComponent ) และ ApiService

ฉันมีการทำงานที่ดีที่สุดนี้คือแต่ละส่วนสามารถเข้าถึง json api และรับข้อมูลที่เกี่ยวข้องผ่านทาง observables

ปัจจุบันองค์ประกอบรายการวิดีโอเพิ่งได้รับวิดีโอทั้งหมดที่ฉันต้องการที่จะกรองนี้เพื่อวิดีโอเพียงในหมวดหมู่เฉพาะอย่างยิ่งผมประสบความสำเร็จนี้โดยผ่าน CategoryID @Input()กับเด็กผ่านทาง

CategoryComponent.html

<video-list *ngIf="category" [categoryId]="category.id"></video-list>

สิ่งนี้ทำงานได้และเมื่อมีการเปลี่ยนแปลงหมวดหมู่@Input()parentComponent หลักค่า categoryId จะถูกส่งผ่านผ่านแต่ฉันต้องตรวจพบสิ่งนี้ใน VideoListComponent และขออาร์เรย์วิดีโออีกครั้งผ่าน APIService (พร้อมกับ categoryId ใหม่)

ใน AngularJS ฉันจะทำ a $watchบนตัวแปร วิธีที่ดีที่สุดในการจัดการกับสิ่งนี้คืออะไร?

อันที่จริงมีสองวิธีในการตรวจจับและดำเนินการเมื่ออินพุตเปลี่ยนแปลงในองค์ประกอบลูกในเชิงมุม 2 +:

1. คุณสามารถใช้วิธีวงจรชีวิต ngOnChanges ()ดังที่กล่าวไว้ในคำตอบที่เก่ากว่า:

    @Input() categoryId: string;

    ngOnChanges(changes: SimpleChanges) {

        this.doSomething(changes.categoryId.currentValue);
        // You can also use categoryId.previousValue and 
        // categoryId.firstChange for comparing old and new values

    }

เอกสารลิงค์: ngOnChanges, SimpleChanges, SimpleChange
ตัวอย่างสาธิต: ดูที่plunker นี้

2. อีกทางหนึ่งคุณยังสามารถใช้setter คุณสมบัติอินพุตดังนี้:

    private _categoryId: string;

    @Input() set categoryId(value: string) {

       this._categoryId = value;
       this.doSomething(this._categoryId);

    }

    get categoryId(): string {

        return this._categoryId;

    }

การเชื่อมโยงเอกสารอ้างอิง: ดูที่นี่

ตัวอย่างการสาธิต: ดูที่พลั่วเกอร์นี้

คุณควรใช้วิธีการใด

หากองค์ประกอบของคุณมีหลายอินพุตดังนั้นหากคุณใช้ ngOnChanges () คุณจะได้รับการเปลี่ยนแปลงทั้งหมดสำหรับอินพุตทั้งหมดพร้อมกันภายใน ngOnChanges () การใช้วิธีการนี้คุณสามารถเปรียบเทียบค่าปัจจุบันและค่าก่อนหน้าของอินพุตที่เปลี่ยนแปลงและดำเนินการตามความเหมาะสม

อย่างไรก็ตามหากคุณต้องการทำอะไรบางอย่างเมื่อมีการเปลี่ยนแปลงอินพุตเพียงครั้งเดียว (และคุณไม่สนใจอินพุตอื่น) มันอาจง่ายกว่าที่จะใช้ setter คุณสมบัติอินพุต อย่างไรก็ตามวิธีนี้ไม่ได้มีวิธีการเปรียบเทียบค่าก่อนหน้าและปัจจุบันของอินพุตที่มีการเปลี่ยนแปลง (ซึ่งคุณสามารถทำได้อย่างง่ายดายด้วยเมธอดวงจรชีวิต ngOnChanges)

แก้ไข 2017-07-25: การเปลี่ยนแปลงการตรวจจับอาจจะไม่เกิดไฟไหม้ภายใต้วงจรบางอย่าง

โดยปกติแล้วการตรวจสอบการเปลี่ยนแปลงสำหรับทั้งหมาและ ngOnChanges จะยิงเมื่อใดก็ตามที่องค์ประกอบของผู้ปกครองที่มีการเปลี่ยนแปลงข้อมูลที่ส่งผ่านไปยังลูกได้หากข้อมูลที่เป็นประเภทข้อมูลดั้งเดิม JS (สตริงจำนวนบูล) อย่างไรก็ตามในสถานการณ์ต่อไปนี้มันจะไม่เริ่มทำงานและคุณต้องดำเนินการพิเศษเพื่อให้สามารถใช้งานได้

1. หากคุณใช้วัตถุหรืออาร์เรย์ที่ซ้อนกัน (แทนที่จะเป็นชนิดข้อมูลดั้งเดิมของ JS) เพื่อส่งผ่านข้อมูลจากพาเรนต์ไปยังลูกการตรวจจับการเปลี่ยนแปลง (โดยใช้ setter หรือ ngchanges) อาจไม่ทำงานตามที่กล่าวไว้ในคำตอบโดยผู้ใช้: muetzerich สำหรับการแก้ปัญหาดูที่นี่

2. หากคุณกำลังกลายพันธุ์ข้อมูลภายนอกบริบทเชิงมุม (เช่นจากภายนอก) ดังนั้นมุมจะไม่ทราบการเปลี่ยนแปลง คุณอาจต้องใช้ ChangeDetectorRef หรือ NgZone ในองค์ประกอบของคุณเพื่อทำให้มุมรับรู้ถึงการเปลี่ยนแปลงภายนอกและทำให้เกิดการตรวจจับการเปลี่ยนแปลง อ้างถึงนี้

ใช้ngOnChanges()วิธีวงจรชีวิตในองค์ประกอบของคุณ

ngOnChanges ถูกเรียกใช้ทันทีหลังจากตรวจสอบคุณสมบัติของ data-bound และก่อนที่จะมีการตรวจสอบมุมมองและเนื้อหาลูกถ้าอย่างน้อยหนึ่งในนั้นมีการเปลี่ยนแปลง

นี่เป็นเอกสาร

ฉันได้รับข้อผิดพลาดในคอนโซลรวมถึงคอมไพเลอร์และ IDE เมื่อใช้SimpleChangesประเภทในลายเซ็นฟังก์ชั่น เพื่อป้องกันข้อผิดพลาดใช้anyคำสำคัญในลายเซ็นแทน

ngOnChanges(changes: any) {
    console.log(changes.myInput.currentValue);
}

แก้ไข:

ดังที่จอนชี้ให้เห็นด้านล่างคุณสามารถใช้SimpleChangesลายเซ็นได้เมื่อใช้เครื่องหมายวงเล็บแทนเครื่องหมายจุด

ngOnChanges(changes: SimpleChanges) {
    console.log(changes['myInput'].currentValue);
}

ทางออกที่ปลอดภัยที่สุดคือการไปกับที่ใช้ร่วมกันให้บริการแทนของ@Inputพารามิเตอร์ นอกจากนี้@Inputพารามิเตอร์จะไม่ตรวจจับการเปลี่ยนแปลงในประเภทวัตถุที่ซ้อนกันที่ซับซ้อน

บริการตัวอย่างง่าย ๆ มีดังนี้:

Service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class SyncService {

    private thread_id = new Subject<number>();
    thread_id$ = this.thread_id.asObservable();

    set_thread_id(thread_id: number) {
        this.thread_id.next(thread_id);
    }

}

Component.ts

export class ConsumerComponent implements OnInit {

  constructor(
    public sync: SyncService
  ) {
     this.sync.thread_id$.subscribe(thread_id => {
          **Process Value Updates Here**
      }
    }

  selectChat(thread_id: number) {  <--- How to update values
    this.sync.set_thread_id(thread_id);
  }
}

คุณสามารถใช้การนำไปใช้ที่คล้ายกันในส่วนประกอบอื่น ๆ และองค์ประกอบทั้งหมดของคุณจะแชร์ค่าเดียวกัน

ฉันต้องการเพิ่มว่ามี hook Lifecycle อีกอันที่เรียกDoCheckว่ามีประโยชน์หาก@Inputค่าไม่ใช่ค่าดั้งเดิม

ฉันมีอาเรย์เป็นแบบInputนี้ดังนั้นจึงไม่ได้ดำเนินการOnChangesเหตุการณ์เมื่อเนื้อหาเปลี่ยนแปลง (เนื่องจากการตรวจสอบว่าแองกูลาร์ทำได้ง่ายและไม่ลึกดังนั้นอาเรย์จึงยังคงเป็นอาเรย์แม้ว่าเนื้อหาในอาเรย์จะเปลี่ยนไป)

จากนั้นฉันก็ใช้รหัสตรวจสอบที่กำหนดเองเพื่อตัดสินใจว่าฉันต้องการอัปเดตมุมมองของฉันด้วยอาร์เรย์ที่เปลี่ยนแปลงหรือไม่

  @Input()
  public set categoryId(categoryId: number) {
      console.log(categoryId)
  }

โปรดลองใช้วิธีนี้ หวังว่านี่จะช่วยได้

นอกจากนี้คุณยังสามารถมีสิ่งที่สังเกตเห็นได้ซึ่งก่อให้เกิดการเปลี่ยนแปลงในองค์ประกอบหลัก (CategoryComponent) และทำสิ่งที่คุณต้องการทำในการสมัครสมาชิกในองค์ประกอบย่อย (videoListComponent)

service.ts 
public categoryChange$ : ReplaySubject<any> = new ReplaySubject(1);

-----------------
CategoryComponent.ts
public onCategoryChange(): void {
  service.categoryChange$.next();
}

-----------------
videoListComponent.ts
public ngOnInit(): void {
  service.categoryChange$.subscribe(() => {
   // do your logic
});
}

ที่นี่ ngOnChanges จะเรียกใช้เสมอเมื่อคุณสมบัติการป้อนข้อมูลของคุณเปลี่ยนแปลง:

ngOnChanges(changes: SimpleChanges): void {
 console.log(changes.categoryId.currentValue)
}

โซลูชันนี้ใช้คลาสพร็อกซีและเสนอข้อดีดังต่อไปนี้:

• อนุญาตให้ผู้บริโภคใช้ประโยชน์จากพลังของRXJS
• อื่น ๆที่มีขนาดกะทัดรัดกว่าโซลูชั่นอื่น ๆ ที่นำเสนอเพื่อให้ห่างไกล
• เพิ่มเติมtypesafeกว่าการใช้ngOnChanges()

ตัวอย่างการใช้งาน:

@Input()
public num: number;
numChanges$ = observeProperty(this as MyComponent, 'num');

ฟังก์ชั่นยูทิลิตี้:

export function observeProperty<T, K extends keyof T>(target: T, key: K) {
  const subject = new BehaviorSubject<T[K]>(target[key]);
  Object.defineProperty(target, key, {
    get(): T[K] { return subject.getValue(); },
    set(newValue: T[K]): void {
      if (newValue !== subject.getValue()) {
        subject.next(newValue);
      }
    }
  });
  return subject;
}

หากคุณไม่ต้องการใช้วิธีใช้ ngOnChange ใช้ og onChange () คุณยังสามารถสมัครรับข้อมูลการเปลี่ยนแปลงของรายการที่เฉพาะเจาะจงตามเหตุการณ์ valueChanges , ETC

 myForm= new FormGroup({
first: new FormControl()   

});

this.myForm.valueChanges.subscribe(formValue => {
  this.changeDetector.markForCheck();
});

markForCheck () เขียนเพราะใช้ในการประกาศนี้:

  changeDetection: ChangeDetectionStrategy.OnPush

นอกจากนี้คุณยังสามารถส่ง EventEmitter เป็น Input ได้ ไม่แน่ใจว่านี่เป็นวิธีปฏิบัติที่ดีที่สุดหรือไม่ ...

CategoryComponent.ts:

categoryIdEvent: EventEmitter<string> = new EventEmitter<>();

- OTHER CODE -

setCategoryId(id) {
 this.category.id = id;
 this.categoryIdEvent.emit(this.category.id);
}

CategoryComponent.html:

<video-list *ngIf="category" [categoryId]="categoryIdEvent"></video-list>

และใน VideoListComponent.ts:

@Input() categoryIdEvent: EventEmitter<string>
....
ngOnInit() {
 this.categoryIdEvent.subscribe(newID => {
  this.categoryId = newID;
 }
}