Question

我是Angular 2的新手，希望通过<router-outlet>

将bool从一个组件传递到另一个组件

我理解为此我必须使用服务。

基本上我想要的是在另一个组件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) => {

（删除()）

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

1 个答案: