首页 文章

如何从组件中获取服务中的Observable的值并将其传递给我的视图？

提问于
浏览 次
1

我为此尝试了很多东西，似乎没有任何帮助 .

What I'm trying to accomplish:

  • 用户单击选择组件视图上的按钮

  • 事件触发，在选择组件上调用 changePage()

  • 这会在服务上调用 changePage() 并传入一个字符串

  • changePage() 在服务中更新 observable

  • 在主要组件中，创建 subscription 并根据服务中的 Observable 更改变量 pageName 的值

  • pageName 更新为页面上的 Headers

Service

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

@Injectable()

export class PageService{
    pageChange$: Subject<String> = new BehaviorSubject("About Me");

    constructor(){
    }

    public changePage(changeTo: String){
        console.log(changeTo); // LOGS PROPERLY
        this.pageChange$.next(changeTo);
    }
}

Selection Component

export class SelectionComponent implements OnInit {

  constructor(private _pageService:PageService) { }

  ngOnInit() {
  }

  // Called on button click, passed a string from the button
  changePage(changeTo: string){
      this._pageService.changePage(changeTo);
  }
}

Main Component

import { Component, OnInit } from '@angular/core';
import { PageService } from '../page-service.service';
import { AsyncPipe } from '@angular/common';

@Component({
  selector: 'app-main-content',
  templateUrl: './main-content.component.html',
  styleUrls: ['./main-content.component.css'],
  providers: [PageService]
})
export class MainContentComponent implements OnInit {    
  pageName: String;

  constructor(private _pageService: PageService) {  
  }

  ngOnInit() {
      this._pageService.pageChange$.subscribe(value => {
          console.log(value); // DOES NOT LOG
          this.pageName = value;
      });
}

Information to update

<h3 class="content-header">{{ pageName }}</h3>

我一直在努力解决这个问题 . 不可否认，我对Angular很新，也许我只是对Observables如何工作感到困惑，但目前它还没有用 .

我在控制台中使用“关于我”获得了一个console.log，但之后没有任何内容 . 没有错误，没有 . h3会说关于我，但不会改变 .

angular rxjs observable angular2-observables

1 回答

  • 3

    在您的主要组件中，我注意到您正在提供这样的PageService

    @Component({
  ...
  providers: [PageService]
})

    如果您在选择组件中也执行相同操作，则无法获取发出的消息 . 这是由于Angular 's Dependency Injection works. You need to have a Singleton PageService between your Main Component and your Selection Component. If that'的情况，你应该从两个组件中删除 providers: [PageService] 并在你的根模块中提供它 . （在大多数情况下 app.module.ts ） .

    尝试一下，看看你是否不会从MainComponent中的PageComponent获取发出的消息 .

    Edit

    你可以阅读更多关于DI here.的信息

    回复于

相关问题