在角2與<路由器出口>組件之間傳遞數據

Question

我很新的角2，並希望從一個組件到另一個傳遞一個布爾與<router-outlet>

我理解此我必須使用一個服務。

基本上我想要的是從另一個組件front.component.ts中設置app.component.ts中的bool，以展開和摺疊app.component.html中的標頭。

這是我有：

app.component.ts：

import { Component, OnInit } from "@angular/core"; 
import { HeaderService } from "./header.service"; 

@Component({ 
selector: "fandango-app", 
templateUrl: "views/app.component.html", 
providers: [HeaderService] 
}) 

export class AppComponent implements OnInit { 

headerCollapsed: Boolean = false; 
headerService: HeaderService; 

constructor(headerService: HeaderService) { 
    this.headerService = headerService; 
} 

ngOnInit() { 
    var self = this; 
    this.headerService.headerToggle.subscribe((headerCollapsed: Boolean) =>() => { 
     self.headerCollapsed = headerCollapsed; 
    }); 
    } 
} 

front.component.ts：

import { Component, AfterViewInit } from "@angular/core"; 
import { HeaderService } from "./header.service"; 

@Component({ 
templateUrl: "views/front.component.html", 
styleUrls: ["content/front.component.css"] 
}) 

export class FrontComponent implements AfterViewInit { 

headerService: HeaderService; 

constructor(headerService: HeaderService) { 
    this.headerService = headerService; 
} 

ngAfterViewInit() { 
    this.headerService.setHeader(false); 
    } 
} 

header.service.ts：

import { Output, EventEmitter, Injectable } from "@angular/core"; 

@Injectable() 
export class HeaderService { 

@Output() headerToggle = new EventEmitter<Boolean>(); 

constructor() { 

} 

setHeader(headerCollapsed: Boolean) { 
    this.headerToggle.emit(headerCollapsed); 
} 
} 

app.routing.ts：

個

import { ModuleWithProviders } from "@angular/core"; 
import { Routes, RouterModule } from "@angular/router"; 

import { FrontComponent } from "./front.component"; 
import { PricingComponent } from "./pricing.component"; 

const appRoutes: Routes = [ 
{ path: "", redirectTo: "front", pathMatch: "full" }, 
{ path: "front", component: FrontComponent }, 
{ path: "pricing", component: PricingComponent } 
]; 

export const appRoutingProviders: any[] = []; 

export const routes: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

app.module.ts：

import { NgModule } from "@angular/core"; 
//import { NgbModule } from "@ng-bootstrap/ng-bootstrap"; 
import { BrowserModule } from "@angular/platform-browser"; 
import { routes, appRoutingProviders } from "./app.routing"; 

import { AppComponent } from "./app.component"; 
import { FrontComponent } from "./front.component"; 
import { PricingComponent } from "./pricing.component"; 

import { AffixDirective } from "./affix.directive"; 

@NgModule({ 
imports: [ 
    //NgbModule, 
    BrowserModule, 
    routes 
], 
declarations: [ 
    AppComponent, 
    FrontComponent, 
    PricingComponent, 
    AffixDirective 
], 
providers: [ 
    appRoutingProviders 
], 
bootstrap: [AppComponent] 
}) 

export class AppModule { } 

app.component.html：

<header [class.expanded]="!headerCollapsed" [class.collapsed]="headerCollapsed"> 
<div class="container"> 
    <a href="/"> 
     my app 
    </a> 
</div> 
</header> 
<span>{{ headerCollapsed }}</span> 
<router-outlet></router-outlet> 

的index.html：

<my-app id="app">   
    <div id="loader" class="container text-center"> 
     <p>loading</p> 
     <div class="loader"> 
      <span></span> 
      <span></span> 
      <span></span> 
     </div> 
    </div>   
</my-app> 

的問題是，它從來沒有步驟爲：

self.headerService.headerToggle.subscribe((headerCollapsed: Boolean) =>() => { 
    self.headerCollapsed = headerCollapsed; 
}); 

我在做什麼錯？再次

介意，我很新的Angular2，我不知道如果這個代碼是做到這一點的最好辦法。

Answer 1

您不應在服務中使用@Output()或EventEmitter。這些是只有組件和指令的輸出。 @Output()在服務中根本沒有任何影響。

改用

headerToggle = new Subject<Boolean>(); 

在你的情況

headerToggle = new BehaviorSubject<Boolean>(); 

與

setHeader(headerCollapsed: Boolean) { 
    this.headerToggle.next(headerCollapsed); 
} 

應該解決您的問題。

而且改變

this.headerService.headerToggle.subscribe((headerCollapsed: Boolean) =>() => { 

到

this.headerService.headerToggle.subscribe((headerCollapsed: Boolean) => { 

（刪除()）在控制檯