在 Angular 2 和 <router-outlet> 中的组件之间传递数据

Question

我是 Angular 2 的新手，想使用 <router-outlet>

将布尔值从一个组件传递到另一个组件

我知道为此我必须使用服务。

基本上我想要的是从另一个组件 front.component.ts 在 app.component.ts 中设置一个布尔值，以展开和折叠 app.component.html 中的 header。

这是我的：

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) => {

（删除 ()）

在 Angular 2 和 <router-outlet> 中的组件之间传递数据

Passing data between components in Angular 2 with <router-outlet>

angular

typescript

angular2-services