Question

我创建了一个服务，该服务的主题为 selectedNode 。当我给出用于加载页面的直接URL时，我试图更新subject的值。问题是当我尝试通过URL直接更新值时，主题的值未更新。

例如如果我打开URL localhost:4200/blog/page/subpage，则应该用值page/subpage更新selectedNode。但是，事实并非如此。

我的代码如下：

blog.component.ts

import {Component, OnInit} from '@angular/core';
import {BlogService} from '../../services/blog.service';
import {Router} from '@angular/router';

@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css']
})
export class BlogComponent implements OnInit {

  constructor(private blogService: BlogService, private router: Router) {
  }

  ngOnInit() {
    let routerURL = this.router.url;
    routerURL = routerURL.replace('/blog/', '');
    console.log(routerURL);
    this.blogService.selectedNode.next(routerURL);
  }
}

此处以下代码不会更新SelectedNode主题。我在调试时检查。尽管routerURL的值不同，但主题中的值不会更新，并且this.blogService.selectedNode.next(routerURL);也被调用。

我的blog.service.ts文件如下：

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs';
import {HttpClient} from '@angular/common/http';

@Injectable()
export class BlogService {

  public selectedNode: Subject<string> = new Subject<string>();
  public sideNavDisabled: Subject<boolean> = new Subject<boolean>();

  constructor(private http: HttpClient) {
  }

  public getTreeNodes() {
    return this.http.get('/assets/tree.json');
  }

  public getPageContent(page: string) {
    return this.http.get('/assets/TreeStructure/' + page + '.html');
  }
}

我的完整代码位于https://github.com/vibhorgoyal18/atest-blog 并可以在https://stackblitz.com/github/vibhorgoyal18/atest-blog

上查看

Answer 1

首先，感谢您将代码放入stackblitz中。这帮助我更快地了解了问题！这就是我支持并回答您的问题的原因。

问题是当我尝试通过URL直接更新主题时，主题的值未更新。

实际上是已更新。为了证明这一点，请用以下代码替换ngOnInit的{{1}}方法：

BlogComponent

问题来自以下事实：在调用const routerURL = this.router.url; this.blogService.selectedNode.subscribe(console.log); // console.log is called here this.blogService.selectedNode.next(routerURL);的{{1}}方法之前未启动订阅。在调用此方法之前，不会实例化预订Subject的组件。

如果您要向next发出一个值并让它成为未来，则观察对象将获得该值，而不考虑发出时订阅了Subject的内容，看看ReplaySubject

在查看Subject之前，最好先了解热和冷可观察物之间的区别：主题是“热”可观察物，这意味着它们会发火，无论订阅了什么内容。相反，“冷”可观察物是根据其订阅内容触发的。有关更多信息，请参见here。

RXJS主题的值未在重新加载页面上更新

1 个答案:

RXJS主题的​​值未在重新加载页面上更新

1 个答案:

RXJS主题的值未在重新加载页面上更新