Потребление услуг в разных компонентах не работает

Question

У меня есть боковая панель навигации и div содержимого.В настоящее время я хочу добиться того, чтобы каждый раз, когда я нажимал на любой элемент в боковой навигации.Внутренний текст этого элемента навигации должен отображаться в содержимом div.Мой код как показано ниже

sidenav.component.ts

import {Component} from '@angular/core';
import {FlatTreeControl} from '@angular/cdk/tree';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material';
import {BlogService} from '../../../../services/blog.service';

interface FoodNode {
  name: string;
  children?: FoodNode[];
}

const TREE_DATA: FoodNode[] = [
  {
    name: 'Fruit',
    children: [
      {name: 'Apple'},
      {name: 'Banana'},
      {name: 'Fruit loops'},
    ]
  }, {
    name: 'Vegetables',
    children: [
      {
        name: 'Green',
        children: [
          {name: 'Broccoli'},
          {name: 'Brussel sprouts'},
        ]
      }, {
        name: 'Orange',
        children: [
          {name: 'Pumpkins'},
          {name: 'Carrots'},
        ]
      },
    ]
  },
];

interface ExampleFlatNode {
  expandable: boolean;
  name: string;
  level: number;
}


@Component({
  selector: 'app-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.css'],
  providers: [BlogService]
})
export class SidenavComponent {


  treeControl = new FlatTreeControl<ExampleFlatNode>(
    node => node.level, node => node.expandable);

  private transformer = (node: FoodNode, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level,
    };
  }

  treeFlattener = new MatTreeFlattener(
    this.transformer, node => node.level, node => node.expandable, node => node.children);

  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

  constructor(private blogService: BlogService) {
    this.dataSource.data = TREE_DATA;
  }

  hasChild = (_: number, node: ExampleFlatNode) => node.expandable;

  routeToPage(event: any) {

    this.blogService.changeSelectedNode(event.target.innerText);
  }
}

content.component.ts

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

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css'],
  providers: [BlogService]
})
export class ContentComponent implements OnInit {
  page: string;

  constructor(private blogService: BlogService) {
    this.page = this.blogService.selectedNodeName;
    console.log(this.page);
  }

  ngOnInit() {
  }
}

blog.service.ts

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

@Injectable()
export class BlogService {

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

  constructor() {
    this.selectedNode.subscribe((node) => {
      this.selectedNodeName = node;
    });
  }

  changeSelectedNode(node: string) {
    this.selectedNode.next(
      this.selectedNodeName = node
    );
  }
}

Пожалуйста, помогите мне решить эту проблему.Я успешно могу передать контент в службу, но код в файле содержимого не выполняется каждый раз, когда я нажимаю на элемент боковой навигации.

Мой полный код можно найти здесь - https://stackblitz.com/github/vibhorgoyal18/atest-blog

Answer 1

Это заняло у меня некоторое время, но вот ваш пример обновлен и работает: Демо

Это то, что я изменил:

Сначала ваша служба была определена неправильно.Вы добавили свою службу, например [поставщики: BlogService], в свой SideNavComponent и ContentComponent.Эти компоненты не получили тот же экземпляр BlogService, и поэтому он не работал.Вы должны поместить провайдеров: [BlogService] в модуль AppModule.

Второе: я удалил раздел, в котором вы подписываетесь на ваш сервис, и переместил его в ContentComponent.В противном случае Angular не будет правильно связываться с этой переменной.

РЕДАКТИРОВАТЬ: если вы используете Angular 6+, вы также можете добавить это в свой сервис и удалить его из провайдеров в вашем модуле:

@Injectable({
    providedIn: 'root'
})

Это обеспечивает сервис во всех ваших приложениях,Если вы хотите, чтобы сервис предоставлялся только в одном модуле, вы можете указать этот модуль, застрахованный от root.