添加直接链接后无法加载页面

Question

我正在尝试通过直接在浏览器中输入URL来加载页面。 我有3个名为BlogComponent，SideNavComponent和ContentComponent的组件

我的文件如下：

blog.component.ts

import {Component, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
import {BlogService} from '../../../services/blog.service';
import {Subscription} from 'rxjs';
import {HttpClient, HttpErrorResponse} from '@angular/common/http';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class ContentComponent implements OnInit, OnDestroy {
  pageContent: string;
  blogContentSubscription: Subscription;

  constructor(private blogService: BlogService, private http: HttpClient) {
  }

  ngOnInit() {
    this.blogContentSubscription = this.blogService.selectedNode.subscribe((node) => {
      console.log(node);
      this.blogService.getPageContent(node).subscribe(data => {
      }, (res: HttpErrorResponse) => {
        this.pageContent = res.error.text;
      });
    });
  }

  ngOnDestroy(): void {
    this.blogContentSubscription.unsubscribe();
  }
}

sidenav.component.ts

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


export interface Files {
  name: string;
  reference: string;
  isExpanded: boolean;
  children: Files[];

}

@Component({
  selector: 'app-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.css'],
})
export class SidenavComponent implements OnInit {
  files: Files[];
  selectedPath: string;


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

  ngOnInit() {
    this.blogService
      .getTreeNodes()
      .subscribe((files: []) => {
        this.files = files;
      });
  }

  toggleState(item: Files) {
    item.isExpanded = !item.isExpanded;
  }

  nodeSelectEvent(reference: string, event: any) {
    this.selectedPath = '';
    this.selectedPath = reference;
    this.getHierarchicalPath(event.target.parentElement.parentElement.parentElement);
    this.router.navigate(['/blog/' + this.selectedPath]);
    this.blogService.selectedNode.next(this.selectedPath);

  }

  getHierarchicalPath(element: Element) {

    const parentReference = element.getAttribute('id');
    if (parentReference) {
      this.selectedPath = parentReference + '/' + this.selectedPath;
      this.getHierarchicalPath(element.parentElement.parentElement);
    }
  }
}

content.component.ts

import {Component, OnDestroy, OnInit, ViewEncapsulation} from '@angular/core';
import {BlogService} from '../../../services/blog.service';
import {Subscription} from 'rxjs';
import {HttpClient, HttpErrorResponse} from '@angular/common/http';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class ContentComponent implements OnInit, OnDestroy {
  pageContent: string;
  blogContentSubscription: Subscription;

  constructor(private blogService: BlogService, private http: HttpClient) {
  }

  ngOnInit() {
    this.blogContentSubscription = this.blogService.selectedNode.subscribe((node) => {
      console.log(node);
      this.blogService.getPageContent(node).subscribe(data => {
      }, (res: HttpErrorResponse) => {
        this.pageContent = res.error.text;
      });
    });
  }

  ngOnDestroy(): void {
    this.blogContentSubscription.unsubscribe();
  }
}

和我的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');
  }
}

现在，每当我单击 sidenav 中的任何元素时，该元素的层次结构路径都将通过 sidenav 中的 gethierarchicalPath 函数提取出来组件，并传递给我服务中的 selectedNode 主题。 由于我的 ContentComponent 已订阅 selectedNode 主题。我能够成功使用此值并将数据呈现到我的contentComponent的模板中。 我还根据分层路径形成了一个URL，并将其添加到路由中。我的博客组件还能够检测URL的更改，并将其传递给 selectedNode 主题。

问题是，当我重新加载页面或尝试直接加载URL时，不会基于URL显示我的内容。我试图将console.log放在contentComponent的订阅方法中。但是，它不会在重新加载页面上执行。

我的app-routing.module.ts也如下：

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {LoginComponent} from './modules/login/login.component';
import {BlogComponent} from './modules/blog/blog.component';

const routes: Routes = [

  {
    path: '',
    redirectTo: 'blog',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'blog',
    component: BlogComponent,
    children: [
      {
        path: '**',
        component: BlogComponent
      }
    ]
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

我的完整代码可以在这里找到-https://github.com/vibhorgoyal18/atest-blog

请帮助我解决这个问题。