각도 4 데이터 바인딩 개념

Question

각도 응용 프로그램을 만들고 데이터 바인딩에 대한 도움이 필요합니다.

다른 위젯이있는 대시 보드가 있습니다. 모든 위젯에는 이름과 날짜가 있습니다. 이 설정을 구성/변경하려면 표시 할 수있는 사이드 바를 만들었습니다. 라우터를 사용하여 대시 보드보기를 표시하고 있습니다. 사이드 바는 라우터 외부에있는 대시 보드의 하위 노드가 아닙니다.

위젯의 설정 버튼을 클릭하면 사이드 바가 열려야하며이 위젯의 ​​설정을 표시 및 변경할 수 있어야하며 위젯이 업데이트 기능을 실행해야합니다.

나는 이미 공유 서비스로 작업하려했지만 다른 설정 개체로 각각 여러 위젯을 가지고 있기 때문에 이것이 최선의 해결책이라고 생각하지 않습니다.

Answer 1

router-outlet 태그의 클릭 이벤트에 바인딩 할 수 없으므로 공유 서비스는이 시나리오에 대한 좋은 호출입니다.

의 당신이 구성 요소 (의사)가 있다고 가정 해 봅시다 :

class MyWidget { 
    widgetData: Object; 
    constructor(private myService: MyService) { } 
    handleClick(event) { 
    this.myService.sendClick({event, data:this.widgetData}) 
    } 
} 

그런 다음 서비스에, 당신은 상점 귀하의 Sidebar 구성 요소에 필요한 데이터를 유지하는 Subject를 사용할 수 있습니다.

예 서비스 (psuedocode) : 다른 자원에 대한

class Sidebar { 
    widgetData: Object; 
    constructor(private myService: MyService) { 
    myService.getClick() 
     .subscribe(v => doSomethingWithWidgetData(v)); 
    } 
} 

:

이

class MyService { 
    subject = new Subject(); 
    sendClick(data) { 
    this.subject.next(data); 
    } 
    getClick(data) { 
    return this.subject.asObservable(); 
    } 
} 

마지막으로, Sidebar이 서비스에서 getClick() 방법 Subscribe 할 수있을 것입니다이 blogpost 좋은있다 이 개념의 설명.

Answer 2

공유 서비스는 부모 자식이 없으므로 여기에있는 것들을 처리하는 방법입니다. 구성 요소 간의 관계 이벤트 이미 터는 사용할 수 없습니다. 당신이 한 단계의 것들을 가져 가고 더 깨끗한 디자인 패턴을 원한다면 Ngrx Suite로 가십시오. 그러한 시나리오를위한 맞춤형 가정부이지만 일부 추가 종속성을 요구하고 더 많은 코드를 요구할 것임을 명심하십시오.

으로 이동하십시오. Ngrx으로 이동하려면 해당 응용 프로그램이 큰 shared services에 붙어 있습니다.

Answer 3

두 구성 요소 사이에 관계가 없으므로 이벤트 이미 터를 사용할 수 없으므로 가장 이상적인 방법은 공유 서비스입니다.