Question

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

我想要完成的任务：

用户点击选择组件视图上的按钮
事件触发，在选择组件上调用changePage()
这会在服务上调用changePage()并传入字符串
changePage()更新observable
在主要组件中，创建subscription并根据服务中的pageName更改变量Observable的值
pageName更新为页面上的标题

服务

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

选择组件

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

主要组件

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

要更新的信息

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

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

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

Answer 1

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

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

如果您在Selection Component中也做同样的事情，那么您将无法获得发出的消息。这是Angular的依赖注入如何工作的原因。您需要在主组件和选择组件之间使用Singleton PageService。如果是这种情况，您应该从两个组件中删除 providers: [PageService]，而仅在根模块中提供它。（在大多数情况下app.module.ts）。

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

修改

您可以阅读有关DI here.
的更多信息

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

1 个答案: