Маршрутизатор Link не загружает другую страницу с другим заполнителем. Это правильный способ сделать это? - PullRequest
Новая
       17

Маршрутизатор Link не загружает другую страницу с другим заполнителем. Это правильный способ сделать это?

0 голосов
/ 23 мая 2019

Я пытаюсь создать тему 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!");
  }

}

Ссылка на API Blogger для понимания структуры JSON https://developers.google.com/blogger/docs/3.0/reference/pages

I 'Я новичок в Angular и все еще учусь.Возможно, я бы что-то пропустил.

1 Ответ

1 голос
/ 24 мая 2019

Причина, по которой он не обновляется при изменении маршрута, заключается в том, что вы используете снимок paramMap для получения переменной маршрута permalink. Вместо этого вы должны использовать ActivatedRoute.params наблюдаемый. Таким образом, когда изменения происходят с маршрутом, компонент узнает о них и сможет реагировать. 

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