拨打角度使用服务组件之间的方法不工作

Question

我试图用注射服务（从该组件在其他组件我打电话的方法）来调用一个方法从其他部件一个部件

我的第一个组件

bottombar.component.ts

import { Component, ElementRef, OnInit, ViewChild, AfterViewInit, ChangeDetectorRef, EventEmitter, Input, Output } from "@angular/core"; 
import { Router } from "@angular/router"; 
import { Label } from "ui/label"; 
import { BottomBarService } from '../../services/bottombarservice/bottombar.service'; 

@Component({ 
    selector: "bottom-bar", 
    templateUrl: "./components/bottombar/bottombar.html", 
    styleUrls:["./components/bottombar/bottombar-common.css", "./components/bottombar/bottombar.css"], 
    //providers: [BottomBarService] 
}) 

export class bottombarComponent implements OnInit { 

    constructor(private bottomBarService: BottomBarService) { 

    } 

    openDrawer(){ 
    this.bottomBarService.callSideDrawerMethod(); 
    } 
    ngOnInit() {} 


} 

从上面的组件我试图调用一个方法SideDrawerGettingStartedComponent其存在下面将触发打开侧抽屉

我的第二组分（在该被调用的方法是存在的）

sidedrawer.component.ts的方法

import { Component, ViewChild, OnInit, AfterViewInit, ChangeDetectorRef } from "@angular/core"; 
import { Page } from "ui/page"; 
import { ActionItem } from "ui/action-bar"; 
import { Observable } from "data/observable"; 
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui-pro/sidedrawer/angular"; 
import { RadSideDrawer } from 'nativescript-telerik-ui-pro/sidedrawer'; 
import { BottomBarService } from '../../services/bottombarservice/bottombar.service'; 

@Component({ 
    // moduleId: module.id, 
    selector: "tk-sidedrawer-getting-started", 
    templateUrl: "./components/sidedrawer/sidedrawer.html", 
    styleUrls: ['./components/sidedrawer/sidedrawer.css'], 
    //providers: [BottomBarService] 
}) 
export class SideDrawerGettingStartedComponent implements AfterViewInit, OnInit { 
    private _mainContentText: string; 

    constructor(private _changeDetectionRef: ChangeDetectorRef,private bottomBarService: BottomBarService) { 
     this.bottomBarService.sideDrawerMethodCalled$.subscribe(() => { 
     console.log("subscribed") 
     alert("hello") 
     this.openDrawer() 
     }) 
    } 

    @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent; 
    private drawer: RadSideDrawer; 

    ngAfterViewInit() { 
     this.drawer = this.drawerComponent.sideDrawer; 
     this._changeDetectionRef.detectChanges(); 
    } 

    ngOnInit() { 
     this.mainContentText = "SideDrawer for NativeScript can be easily setup in the HTML definition of your page by defining tkDrawerContent and tkMainContent. The component has a default transition and position and also exposes notifications related to changes in its state. Swipe from left to open side drawer."; 
    } 

    get mainContentText() { 
     return this._mainContentText; 
    } 

    set mainContentText(value: string) { 
     this._mainContentText = value; 
    } 

    public openDrawer() { 
     console.log("triggered openDrawer in main component") 
     this.drawer.showDrawer(); 
    } 

    public onCloseDrawerTap() { 
     this.drawer.closeDrawer(); 
    } 
} 

和共享服务如下

bottombar.service.ts

import { Subject } from 'rxjs/Subject'; 
import { Injectable } from '@angular/core'; 

@Injectable() 
export class BottomBarService{ 
    private sideDrawerMethodSource = new Subject<any>(); 
    sideDrawerMethodCalled$ = this.sideDrawerMethodSource.asObservable(); 

    callSideDrawerMethod(){ 
     console.log("Inside service bottomBar") 
     this.sideDrawerMethodSource.next(null); 
     console.log("after") 
    } 
} 

问题

我有bottombar.component.ts其中包含一个按钮相关联的HTML。自来水会触发openDrawer（）函数bottombar.component.ts

我可以看到我的服务文件的安慰值，但不知何故，没有触发sidedrawer.component.ts的订阅

没有错误，因此很难找到究竟导致问题的原因。

此外，我已经在ngModule的提供商中声明了我的服务以避免单例问题。

有什么，我在这里失踪？

在此先感谢

Answer 1

在您的共享服务，而不是传递null这里this.sideDrawerMethodSource.next(null)，你可以通过status:boolean。在您的bottombar.service.ts -

callSideDrawerMethod(status:boolean){ 
    this.sideDrawerMethodSource.next(status); 
} 

现在，在bottombar.component。TS，调用方法时传递一个状态 -

this.bottomBarService.callSideDrawerMethod(true); 

在你sidedrawer.component.ts，传递status PARAM -

this.bottomBarService.sideDrawerMethodCalled$.subscribe((status) => { 
     console.log("subscribed") 
     alert("hello") 
     this.openDrawer() 
     }) 

，而不是在构造函数注册和，将代码ngOnInit()生命周期钩。

希望这会有所帮助。

Answer 2

看来你错过了接下来的追加'$'到sideDrawerMethodCalled

试试下面的代码：

callSideDrawerMethod(){ 
     console.log("Inside service bottomBar") 
     this.sideDrawerMethodSource$.next(null); 
     console.log("after") 
    }