撥打角度使用服務組件之間的方法不工作

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") 
    }