共有サービスからコンポーネントのメソッドを呼び出す

Question

sidenavコンポーネントのメソッドopen()を共有サービスから呼び出したいとします。私がコンポーネントから直接メソッドを呼び出すと、正常に動作しています。

ERROR TypeError: Cannot read property 'open' of undefined

Sidenavコンポーネント：

import { MdSidenav } from '@angular/material'; 
import { Component, OnInit, ViewChild } from '@angular/core'; 

@Component({ 
    selector: 'app-sidebar-content', 
    template: ` 
    <md-sidenav-container class="container"> 
    <md-sidenav #sidenav class="sidenav"> 
     Jolly good! 
    </md-sidenav> 

    <app-main-content></app-main-content> 

    </md-sidenav-container> 
    `, 
    styleUrls: ['./sidebar-content.component.css'] 
}) 
export class SidebarContentComponent implements OnInit { 

    @ViewChild('sidenav') el: MdSidenav; 

    constructor() { } 

    ngOnInit() { 

    } 

    openSideNav() { 
    this.el.open();  
    } 

} 

共有サービス：

import { SidebarContentComponent } from './../content/sidebar-content/sidebar-content.component'; 
import { Injectable } from '@angular/core'; 


@Injectable() 
export class SharedService { 

    constructor(private sc: SidebarContentComponent) { } 

    openSidenav() { 
    this.sc.openSideNav(); 
    } 

} 

しかし、すぐに、私は共有サービスから同じメソッドを呼び出すように私は、エラーメッセージが表示されました別のコンポーネントからopenメソッドを呼び出す：

import { SharedService } from './../../services/shared.service'; 
import { Component, OnInit } from '@angular/core'; 

import { SidebarContentComponent } from './../sidebar-content/sidebar-content.component'; 

@Component({ 
    selector: 'app-main-content', 
    templateUrl: ` 
    <div class="sidenav-content"> 
     <app-toolbar></app-toolbar> 
     <button md-button (click)="open()"> 
     Open sidenav 
     </button> 
     <button md-button (click)="openWithService()"> 
     Open sidenav with service 
     </button> 
    </div> 
    `, 
    styleUrls: ['./main-content.component.css'] 
}) 
export class MainContentComponent implements OnInit { 

    constructor(private sc: SidebarContentComponent, private ss: SharedService) { } 

    ngOnInit() { 
    } 

    open() { 
    this.sc.openSideNav(); 
    // Works fine 
    } 

    openWithService() { 
    this.ss.openSidenav(); 
    // Throws an error 
    // ERROR TypeError: Cannot read property 'open' of undefined 
    } 

} 

Answer 1

サービスのSidebarContentComponentを設定していません。あなたはそれを行うことはできますが、適切な方法はrxjs/Subjectを使うことです。

これはそれを行う必要があります。

SharedService

import { Subject } from 'rxjs/Subject'; // don't forget to import it! 

public open$: Subject<any> = new Subject(); 

SidenavComponent

this.sharedService.open$.subscribe(() => this.openSideNav()); 

AnyComponent

this.sharedService.open$.next();