角2+：サービスを使用してコンポーネントの参照を共有する

Question

「ツリー」と呼ばれる角型コンポーネントがあります。私が望むのは、私のアプリの他のコンポーネントからツリー上のメソッドを呼び出すことです。私のアプリ全体にはいつでも1つのツリーしか存在しません。

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(); 
    } 

} 

すると、このAであり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

あり、あなたが探しているものを達成するための複数の方法：

を駆動するイベントあなたはMediatorパターンを使用して、「木」コンポーネントにイベントを送出することができますが。 これには複数のライブラリがあります。例えば：EventEmitter2

• コンポーネントを注入し、値

あなたは、それ自体が価値を持つコンポーネントを注入し、その後、アプリケーションにどこでもそれを使用することができますがあります。 example of an injection factory。

ベスト、本サービスの ホセ・