Question

我有一个问题，在我的angular2项目中，我有2个组件和1个服务。在服务中设置值的功能正在运行，但子组件中的功能（谁承担并获取数据）从未触发。

其他信息：

我使用<router-outlet>标记加载子组件。
问题出在Child Component .suscribe函数

服务：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { IStage, ISystemModule } from './board/board.component';
@Injectable()
export class DetailBoardService {
  //Observable ISystemModule source
  private activeModuleSource = new Subject<ISystemModule>();
  //Observable ISystemModule stream
  activeModuleObject$ = this.activeModuleSource.asObservable();
  //Service message commands
  setActiveModule(activeModule: ISystemModule) {
    console.log('Entro al Service:', activeModule);
    this.activeModuleSource.next(activeModule);
  }
  constructor() { }

}

父组件：

import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';
import { DetailBoardService } from '../detail-board.service';
declare var window;

export interface IStage {
  name: string,
  url: string,
}
export interface ISystemModule {
  name: string,
  icon: string,
  stages: Array<IStage>,
  mainViewUrl: string,
  active?: boolean
}

@Component({
  selector: 'app-board',
  templateUrl: './board.component.html',
  styleUrls: ['./board.component.css'],
  providers: [DetailBoardService]
})

export class BoardComponent implements OnInit {
  title = "WS Composer";
  ver = "v.0.1";
  releaseType = "Alpha";
  systemModules: Array<ISystemModule>;
  @Input() activeModule: ISystemModule;
  titleModal = "";
  contentModal = "";

  constructor(private router: Router, private detailBoardService: DetailBoardService) {

  }

  ngOnInit() {
    //POPULATE SYSTEM MODULES
    this.systemModules = [
      { name: "Frontend", icon: "fa fa-eye", mainViewUrl: "board/frontend", stages: [{ name: "VIEWS", url: "fviews" }, { name: "CONTROLLERS", url: "fcontrollers" }, { name: "SERVICES", url: "fservices" }, { name: "COMPONENTS", url: "fcomponents" }, { name: "SAVE & PUBLISH", url: "fpublish" }], active: true },
      { name: "Backend", icon: "fa fa-cog", mainViewUrl: "board/backend", stages: [{ name: "MODEL", url: "bmodel" }, { name: "CONTROLLERS", url: "bcontrollers" }, { name: "ROUTES", url: "broutes" }, { name: "STANDALONE MODULES", url: "bmodules" }, { name: "SAVE & PUBLISH", url: "bpublish" }] }
    ]
    this.activeModule = this.systemModules[0];
    console.log('seteo activeModule', this.activeModule);
    this.detailBoardService.setActiveModule(this.activeModule);
  }

  public selectModule(index: number) {

    for (let module of this.systemModules) {
      module.active = false;
    }
    this.systemModules[index].active = true;
    this.activeModule = this.systemModules[index];
    this.detailBoardService.setActiveModule(this.activeModule);
    this.router.navigate([this.systemModules[index].mainViewUrl]);


    /*setTimeout(() => {
      window.$('ul.tabs').tabs();
    }, 200);*/

  }


}

子组件

import { Component, OnInit, OnDestroy, Input } from '@angular/core';
import { ISystemModule, IStage } from '../board/board.component';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
import { DetailBoardService } from '../detail-board.service';
@Component({
  selector: 'app-backend',
  templateUrl: './backend.component.html',
  styleUrls: ['./backend.component.css'],
  providers: [DetailBoardService]
})
export class BackendComponent implements OnInit, OnDestroy {
  @Input() activeModule: ISystemModule;
  subscription: Subscription;
  constructor(private router: Router, private detailBoardService: DetailBoardService) {

  }

  ngOnInit() {
    this.subscription = this.detailBoardService.activeModuleObject$.subscribe(
      activeModule => { //this function never firing!!!
        console.log('que trae:', activeModule);
        this.activeModule = activeModule;
      },
      error => {
        console.log(error);
      }
    )
    console.log(this.activeModule);
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

请帮帮我

Answer 1

我意识到当我将Service放在组件本身时，Angular会为该类创建不同的实例，因此，答案是：从两个组件中删除providers数组并将提供者数组放在ngmodule中：

@NgModule({
  declarations: [
    AppComponent,
    BoardComponent,
    LoginComponent,
    FrontendComponent,
    BackendComponent,
    SigninComponent,
    SignupComponent,
    LostpassComponent,
    ModalComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    RouterModule.forRoot(appRoutes, DetailBoardService)
  ],
  providers: [DetailBoardService], <-- HERE !!!
  bootstrap: [AppComponent]
})

Angular2 ngOnInit订阅不执行函数

1 个答案: