typescript - อัปเดตคอมโพเนนต์หลักเมื่อไปยังคอมโพเนนต์ลูก (Angular)

ฉันกำลังประสบปัญหาเกี่ยวกับการอัปเดตคอมโพเนนต์หลักเมื่อมีการนำทางจากคอมโพเนนต์ลูก สิ่งที่ฉันค้นพบจากการค้นคว้าคือ ngOnInit จะถูกเรียกเพียงครั้งเดียว แต่จะจัดการกับปัญหานี้อย่างไร? ฉันได้ลองใช้ lifecycle hooks ต่างๆ แล้ว แต่บางทีฉันอาจใช้ไม่ถูกต้องหรือบางทีก็ไม่ควรใช้เลย! มีใครช่วยได้ไหม? ขอบคุณ!

เส้นทางของฉัน:

{
    path: 'dashboard',
    component: DashboardComponent,
    children: [
        {
            // when user is on dashboard component, no child component shown
            path: '', 
        },

        {   // detail component
            path: ':table/:id', // 
            component: DetailComponent,
        },
        //some more child routes and components...
    ]
}

ngOnInit ในคอมโพเนนต์แดชบอร์ด (พาเรนต์)

ngOnInit() {
    this.getSomething1(); // this populates an array
    this.getSomething2(); // this populates an array
}

เมื่อผู้ใช้เลือกไอเท็มจากหนึ่งในอาร์เรย์ด้านบน ผู้ใช้จะถูกนำทางไปยังหน้ารายละเอียดของไอเท็มนั้น (DetailComponent) ซึ่งผู้ใช้สามารถอัปเดต/ลบไอเท็มนั้นได้

เมธอดในคอมโพเนนต์ลูก เมื่อผู้ใช้ลบรายการ ผู้ใช้จะถูกนำทางไปยังคอมโพเนนต์พ่อแม่:

deleteItem(item: any) {
    // some code... 
    this._router.navigate(['dashboard']); 
}

ดังนั้นทุกอย่างทำงานได้ดี ยกเว้นว่าอาเรย์ของไอเท็มไม่ได้รับการอัปเดต เนื่องจาก ngOnInit ถูกเรียกเพียงครั้งเดียว

ดังนั้นฉันจึงต้องการเรียกใช้เมธอด getSomething1() และ getSomething2() เมื่อผู้ใช้ถูกส่งกลับไปที่ DashboardComponent จากคอมโพเนนต์ลูก DetailComponent

ขอบคุณสำหรับความช่วยเหลือทุกอย่าง!

คำตอบ #1

วิธีแก้ไขสถานการณ์นี้คือการใช้ Subjects

ใน DashboardComponent คุณสามารถประกาศ Subject ได้:

public static returned: Subject<any> = new Subject();

และสมัครรับมัน:

constructor() {
      DashboardComponent.returned.subscribe(res => {
         this.getSomething1(); // this populates an array
         this.getSomething2();
      });
   }

ใน DetailComponent หลังจากลบรายการแล้ว คุณเรียก next ใน subject:

deleteItem(item: any) {
    // some code... 
    DashboardComponent.returned.next(false);
    this._router.navigate(['dashboard']); 
}