角2の観測可能なサブスクリプションがトリガーされない

Question

オブザーバブルトリガリングのサブスクリプションに問題があります。

私はこのように見ている側のnavレイアウトディレクティブを使用してレイアウトを持っている：

<md-sidenav-layout class="nav-bar"> 


    <md-sidenav #start> 
     <nav> 
      <a [routerLink]="['/home']">Home</a> 
     </nav> 
     <button md-button (click)="start.close()">Close</button> 
    </md-sidenav> 

    <router-outlet></router-outlet> 

</md-sidenav-layout> 

私が行うために必要なものは、ルータ、コンセントが表示されるコンポーネントからサイドNAVを開いています。

そのようなコンポーネントは次のようになります

：最後に属する親クラスのコードを（

@Injectable() 
export class SidenavService { 

    private toggle = new Subject<string>(); 
    private toggleObs = this.toggle.asObservable(); 

    getSidenavObs() { 
     return this.toggleObs; 
    } 

    toggleSidenav(state: string) { 
     this.toggle.next(state); 
    } 

} 

：私はこのように観察を返すサービスを作成した

@Component({ 

    providers: [SidenavService, MdIconRegistry], 
    directives: [MdIcon], 
    templateUrl: `<md-icon (click)="toggleSidenav()">menu</md-icon>`, 
    styleUrls: ["./home.component.scss"] 
}) 

export class Home { 

    myColor: string; 

    constructor(private sidenavService: SidenavService) { 
     this.myColor = "primary"; 

     this.sidenavService.getSidenavObs().subscribe(state => {console.log("state change")}); 
    } 


    toggleSidenav() { 

     this.sidenavService.toggleSidenav("open"); 
    } 

} 

サイドナビゲーションレイアウトHTML）：

@Component({ 
    providers: [MdSidenav, SidenavService], 
    directives: [ROUTER_DIRECTIVES, MD_SIDENAV_DIRECTIVES, MD_BUTTON_DIRECTIVES], 
    selector: "app", 
    templateUrl: "app.html", 
    styleUrls: ["./app.scss"], 
}) 

export class App { 

    subscription: Subscription; 

    constructor(private sidenavService: SidenavService, private sidenav: MdSidenav) { 
    this.subscription = sidenavService.getSidenavObs().subscribe(status => { 
     console.log("state change"); 
     sidenav.open(); 
    }, error => { 
     console.log(error); 
    },() => { 
     console.log("completed"); 
    }); 
    } 
} 

私の問題は、 Appコンポーネントは起動しませんが、ホームコンポーネント（ルータコンセントに表示されているもの）のサブスクリプションが期待どおりに起動されます。

ここに何か不足していますか？

私は、このガイドに従っ：あなたは両方のためのプロバイダとしてSidenavServiceがリストされているので、https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Answer 1

同じサービスインスタンスは、あなたのアプリケーションとホームのコンポーネント間で共有されていません。

コンポーネントデコレータのprovidersエントリにサービスプロバイダを定義すると、そのコンポーネントとそのすべての子がシングルトンとして利用できます。つまり、サービスの同じインスタンスが使用されます。

プロバイダを子コンポーネントで再定義すると、サービスの新しいインスタンスが作成され、親/祖先と同じサービスインスタンスを共有しなくなります。

アプリケーションとホームの両方のコンポーネントでSidenavServiceを使用していて、同じインスタンスが必要な場合は、アプリケーションコンポーネントで提供し、ホームのprovidersエントリから削除する必要があります。 DIの詳細については

、以下のリンクの読み取りを持っている： https://angular.io/docs/ts/latest/guide/dependency-injection.html https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html