Question

我正在尝试为我的博客博客构建基于Angular（v6.2.9）的主题，这是我遇到此问题的时间。我正在尝试从我的博客加载页面。为此，我创建了组件和相应的路径（请参见下面的代码）。博客上的页面格式为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/pages

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

Answer 1

更改路线时未更新的原因是，您正在使用dt[dt[, .(i1 = .I[uniqueN(V2) > 1]), V1]$i1][, .(ID = list(unique(ID))), .(V1, V2)] # V1 V2 ID #1: 2 5 1,2 #2: 2 6 2 #3: 2 7 1,3的快照来获取paramMap路线变量。相反，您应该使用permalink观察值。这样，当路线发生更改时，组件将知道它们并能够做出反应。

ActivatedRoute.params

Router Link不会使用其他占位符加载另一个页面。这是正确的方法吗？

1 个答案: