RXJS Значение субъекта не обновляется на странице перезагрузки - PullRequest
Новая
       30

RXJS Значение субъекта не обновляется на странице перезагрузки

1 голос
/ 17 марта 2019

Я создал службу с темой с именем selectedNode . Я пытаюсь обновить значение темы, когда я даю прямой URL для загрузки страницы. Проблема в том, что значение Тема не обновляется, когда я пытаюсь обновить значение непосредственно при передаче URL-адреса.

например. если я открою URL localhost:4200/blog/page/subpage, он должен обновить selectedNode со значением page/subpage. Но это не так.

Мой код указан ниже: 

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

1 Ответ

0 голосов
/ 17 марта 2019

Во-первых, спасибо, что поместили ваш код в стек. Это помогло мне понять проблему намного быстрее! Вот почему я проголосовал и отвечаю на ваш вопрос.

Проблема в том, что значение Subject не обновляется, когда я пытаюсь обновить значение непосредственно при передаче URL-адреса.

Это фактически обновлено . Чтобы доказать это, замените метод ngOnInit BlogComponent на следующий код: 

    const routerURL = this.router.url;
    this.blogService.selectedNode.subscribe(console.log); // console.log is called here
    this.blogService.selectedNode.next(routerURL);

Проблема возникает из-за того, что подписки не инициируются до того, как метод Subject next будет вызван . Компоненты, которые подписываются на Subject, не создаются до вызова этого метода.

Если вы хотите передать значение в Subject и у него есть будущее наблюдаемые получают это значение независимо от того, что подписано на Subject во время передачи, посмотрите на ReplaySubject

Прежде чем взглянуть на ReplaySubject с, хорошо понять разницу между горячими и холодными наблюдаемыми: субъекты являются «горячими» наблюдаемыми, что означает, что они запускаются независимо от того, что на них подписано. Напротив, «холодные» наблюдаемые они запускаются в зависимости от того, что на них подписано. См. здесь для получения дополнительной информации.

...