路由器链接没有加载其他占位符的另一页.这是正确的方法

Question

我正在尝试为我的Blogger博客建立一个基于角度的(v6.2.9(主题，这是我遇到此问题的时候。我正在尝试从博客中加载页面。为此，我创建了组件和相应的路径(请参见下面的代码(。Blogger上的页面具有http://{blogname}.blogspot.com/p/{permalink}格式。我当前代码的问题在于，当单击具有相应匹配路由的routerLink时，它首次加载任何页面。但是，当单击仅使用不同占位符的链接时，只有URL在地址栏中更改，但没有在屏幕上加载。

我尝试将变量从content.component.ts上打印到控制台上进行调试，但我得到了预期的结果。变量仅一次打印。我还尝试了带有和没有[]括号的routerLink的变体，但没有运气。我猜router.navigate()也将行不通。鉴于这一点，我怀疑我的设计或代码中出现了问题。

app.component-html

<app-page></app-page>
<router-outlet></router-outlet>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ContentComponent } from './content/content.component';
const routes = [
  { path: 'p/:permalink', component: ContentComponent }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

page.component.html

<div *ngIf="allPages">
  <div *ngFor="let page of allPages | keyvalue">
    <a routerLink="{{ page.value['url'] }}"> {{ page.value['id']  }}</a>
  </div>
</div>

page.component.ts

import { Component, OnInit } from '@angular/core';
import { BloggerRestService } from '../blogger-rest.service';
@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.scss']
})
export class PageComponent implements OnInit {
  blogInfo = {
    "url" : "http://dkrypted.blogspot.com/"
  }
  allPages: any = null;
  constructor(
    private rest: BloggerRestService
  ) { }

  ngOnInit() {
    this.getPages();
  }
  getPages() {
    this.rest.getAllPages().subscribe( pages => {
      this.allPages = pages["items"];
      for( let page in this.allPages ) {
        let new_url = this.allPages[page]['url'].replace( this.blogInfo['url'], '/' );
        this.allPages[page]['url'] = new_url;
      }
      console.log(this.allPages);
    });
  }
  isEmptyObject( obj ) {
    for(var prop in obj) {
        if(obj.hasOwnProperty(prop))
            return false;
    }
    return true;
  }
}

content.component.html

<div *ngIf='post'>
  <p [innerHTML] = 'post["content"]'></p>
</div>

content.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { BloggerRestService } from '../blogger-rest.service';
@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.scss']
})
export class ContentComponent implements OnInit {
  blogInfo = {
    "url" : "http://dkrypted.blogspot.com/"
  }
  post: any;
  pageParam = {
    'permalink': ''
  }
  constructor(
    private route: ActivatedRoute,
    private rest: BloggerRestService,
    private router: Router
  ) { }
  ngOnInit() {
    this.pageParam['permalink'] = this.route.snapshot.paramMap.get('permalink');
    let path = "/p/" + this.pageParam['permalink'];
    this.getPage(path);
  }

  getPage( path ) {
    let allPages = null;
    let flag = false;
    this.rest.getAllPages().subscribe( pages => {
      allPages = pages["items"];
      console.log(allPages.length);
      if( allPages.length ) {
        for( let page in allPages ) {
          let new_url = allPages[page]['url'].replace( this.blogInfo['url'], '/' );
          if( new_url == path ) {
            flag = true;
            this.rest.getPage( allPages[page]['id'] ).subscribe((page: {}) => {
              this.post = page;
              console.log(this.post);
            });
            break;
          }
        }
        if( !flag )
            this.router.navigate(['/404']);
      }
    });
    console.log("Get Page called!");
  }
}

这是Blogger API的链接，用于理解JSON结构https://developers.google.com/blogger/docs/3.0/reference/perference/pages

我是角度且仍在学习的新手。我可能会错过任何东西。

Answer 1

更改路由时未更新的原因是因为您使用paramMap的快照来获取permalink路由变量。相反，您应该使用ActivatedRoute.params可观察到的。这样，当路线发生变化时，组件将知道它们并能够做出反应。

this.route.params.pipe(
    switchMap(
        (params: Params) => {
            this.pageParam['permalink'] = params['permalink'];
            ...
        }
    )
)