하위 구성 요소에서 탐색 할 때 상위 구성 요소 업데이트 구성 요소 (각도)

Question

하위 구성 요소에서 라우팅 할 때 상위 구성 요소를 업데이트하는 데 문제가 있습니다. 이 많은 연구를 통해 알게 된 것은 ngOnInit은 한 번만 호출되지만이 문제를 해결하는 방법은 무엇입니까? 다른 라이프 사이클 후크를 시도했지만, 올바르게 사용할 수 없거나 전혀 사용하지 않아야합니다! 누군가 제발 도와 줄 수 있니? 감사!

내 경로 : 대시 보드 구성 요소의

{ 
    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 
} 

사용자가 위의 배열 중 하나에서 항목을 choses

, 사용자는 해당 항목의 세부 정보 페이지 (로 연결됩니다 DetailComponent) 여기서 사용자는 해당 항목을 업데이트/삭제할 수 있습니다. 사용자가 항목을 삭제할 때 하위 구성 요소의

방법은, 사용자는 parentComponent를 라우팅됩니다 : ngOnInit가 한 번만 호출되기 때문에

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

그래서 모두가 항목의 배열이 업데이트되지 않는 것을 제외하고 잘 작동합니다.

그래서 방법을 실행하고자하는 getSomething1()와 사용자가 하위 구성 요소 DetailComponent에서 DashboardComponent로 다시 전달됩니다 getSomething2().

도움 주셔서 감사합니다.

Answer 1

이 상황을 해결하려면 피사체를 사용하는 것이 좋습니다.

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

그리고 가입 : 당신이 주제를 선언 할 수있는 DashboardComponent에서

:

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

을 DetailComponent에서이 항목을 삭제 한 후, 당신은 주제에 다음 전화

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