我为此尝试了很多东西,似乎没有任何帮助。
我想要完成的任务:
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会说关于我,但不会改变。
答案 0 :(得分:3)
在您的主要组件中,我注意到您正在提供这样的PageService
@Component({
...
providers: [PageService]
})
如果您在Selection Component中也做同样的事情,那么您将无法获得发出的消息。这是Angular的依赖注入如何工作的原因。您需要在主组件和选择组件之间使用Singleton PageService。如果是这种情况,您应该从两个组件中删除 providers: [PageService]
,而仅在根模块中提供它。 (在大多数情况下app.module.ts
)。
尝试一下,看看你是否不会从MainComponent中的PageComponent获取发出的消息。
修改强>
您可以阅读有关DI here.
的更多信息