路由器 Link 未加载具有不同占位符的另一个页面。这是正确的方法吗？

Question

我正在尝试为我的博主博客构建一个基于 Angular (v6.2.9) 的主题，这时我遇到了这个问题。我正在尝试从我的博客加载页面。为此，我创建了组件和相应的路径（参见下面的代码）。 Blogger 上的页面格式为 http://{blogname}.blogspot.com/p/{permalink}。我当前代码的问题是，当单击具有相应匹配路由的 routerLink 时，它会第一次完美地加载任何页面。但是，当单击具有不同占位符的 link 时，地址栏中只有 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!");
  }

}

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

我是 Angular 的新手，仍在学习中。我可能会错过一些东西。

Answer 1

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

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

路由器 Link 未加载具有不同占位符的另一个页面。这是正确的方法吗？

Router Link is not loading another page with different placeholder. Is this the right way to do it?

routerlink

angular