angular 中使用服务的组件之间的调用方法不起作用

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

问题

我有一个 html 与 bottombar.component.ts 关联，其中包含一个按钮。点击它会在 bottombar.component.ts

中触发 openDrawer() 函数

我可以在我的服务文件中看到控制台值，但不知何故它没有触发 sidedrawer.component.ts

中的订阅

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

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

我在这里遗漏了什么吗？

提前致谢

Answer 1

您似乎错过了在 sideDrawerMethodCalled

旁边附加 '$'

试试下面的代码：

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

Answer 2

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

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

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

this.bottomBarService.callSideDrawerMethod(true);

在你的 sidedrawer.component.ts 中，传递一个 status 参数 -

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

而不是在构造函数中订阅，而是将代码放在 ngOnInit() 生命周期挂钩中。

希望对您有所帮助。

angular 中使用服务的组件之间的调用方法不起作用

Calling methods between components in angular using service not working

injectable

angular2-services

angular2-nativescript

nativescript-telerik-ui

angular