각도 2+ : 서비스를 사용하여 구성 요소 참조 공유

Question

"트리"라는 각 구성 요소가 있습니다. 내가 원하는 건 내 애플 리케이션의 다른 구성 요소에서 트리에 메서드를 호출하는 것입니다. 내 전체 앱에는 언제든지 하나의 트리 만있을 것입니다.

export class AppComponent implements OnInit { 

    @ViewChild("tree") treeComponent: TreeComponent; 

    constructor(private treeService: TreeService) { } 

    ngOnInit() { 
     this.treeService.setTreeReference(this.treeComponent); 
    } 

} 

가 그럼 난이 방법을 호출 할 수 있습니다 : 그것은 이런 식으로 내가보고 싶은 장소에서 구성 요소를 생성하고 서비스를 사용하여 componentRef를 공유 할 괜찮

export class OtherComponent { 

    constructor(private treeService: TreeService) { } 

    getActiveNode() { 
     return this.treeService.treeReference.getActiveNode(); 
    } 

} 

것은 이것을인가 Angular2 + 또는 일반적으로 MVC에서 우수 사례?

Edit1 : 라이브러리에서 가져온 TreeComponent 코드에 액세스 할 수 없다고 지정하는 것을 잊어 버렸습니다.

Answer 1

공유 서비스 아키텍처에 권장되는 방법은 아닙니다. 그 이유는 구성 요소간에 긴밀한 결합을 생성하기 때문입니다. 모든 소비자는 트리 서비스와 트리 구성 요소의 특정 구현 세부 사항을 알고 있어야합니다. 변경해야 할 경우 모든 소비자가 중단됩니다. 노출되는 방식은 공유 데이터를 설정하고 구독하는 방법을 제공하는 간단한 서비스 API입니다. 이는 서비스의 API 만 유지하면되며 구현 자체는 매우 유연 할 수 있음을 의미합니다. 또한 코드를 훨씬 쉽게 읽고 더 명확하게 할 수 있습니다. 누군가 머리를 파고 들자면 그 앱 구성 요소가 Iinit에서 트리 참조를 설정하고 이해하지 못할 수도 있다는 것을 신비스럽게 느낄 수도 있습니다.

이

@Injectable() 
export class TreeService { 
    private activeNodeSubject: BehaviorSubject<any> = new BehaviorSubject(null); 
    activeNode$ = this.activeNodeSubject.asObservable(); 
    setActiveNode(node) { 
     this.activeNodeSubject.next(node); 
    } 
} 

다음 트리 구성 요소에서, 당신은 setActiveNode이 변경 때마다 전화 : 당신은 유사한 기능

이 그것을 달성 할 것 어떻게 더 많은 요구를 가지고있는이 솔루션은 정말 잘 확장되지 않습니다 모든 소비자는 activeNode $를 구독하여 어떤 노드가 활성 상태인지 항상 알 수 있습니다. 당신이 찾고있는 무엇을 달성하기

Answer 2

가 여러 가지 방법

• 이벤트 중재자 패턴을 사용하여

당신은 당신의 "나무"구성 요소에 이벤트를 전달할 수 있습니다 구동. 여러 개의 lib를 찾을 수 있습니다. 예를 들어 : EventEmitter2

• 구성 요소를 주입 값

당신은 그 자체가 가치가있는 구성 요소를 삽입 한 다음 응용 프로그램에 모든 곳에서 사용할 수 있습니다. example of an injection factory.

보다도, 호세이 서비스의