如何在 Angular 中显示博客详细信息 link

Question

我想在 Angular 中的另一个 link 中显示博客的详细信息。我已经有一个博客文件 (blog.component.ts) 和一个 Angular 服务，我可以在其中从使用 Strapi 制作的 API 后端获取所有博客数据。每个博客中都有一个按钮，它允许您在不同的 link 调用唯一 ID，即名为 'pagina.component.ts' 查看详细信息或完整博客。为此，我想我必须调用每个博客的 ID。

这是我的 blog.component.html，其中我已经有了我的博客列表：

<section class="articles">

  <article class="blue-article" *ngFor="let data of datas; index as i">
    <div class="articles-header">
      <time>{{ data.fecha }}</time>
      <span class="articles-header-tag-blue">{{ data.relevante }}</span>
      <span class="articles-header-category">
        <a href="#" class="blue" title="">{{ data.category.name }}</a>
      </span>
    </div>
    <div class="articles-content">
      <h1><a title="">{{ data.title }}</a></h1>
      <!--<img *ngIf="!data.image" class="foto" [src]="data.image.name" alt="foto">-->
      <div *ngIf="data.image">
        <img
          src="http://localhost:1337{{ data.image.url }}"
          alt="foto"
          width="100%"
        />
      </div>
      <p>
        {{ data.content }}
      </p>
      <h3>{{ data.description }}</h3>
    </div>
    <div class="articles-footer">
      <ul class="articles-footer-info">
        <li><a href="#" class="light-link" title=""><i class="pe-7s-comment"></i> 7 Respuestas</a>
        </li>
        <li><a href="#" class="light-link" title=""><i class="pe-7s-like"></i> 1221</a></li>
      </ul>

      <a [routerLink]="['./pagina',i]" class="btn">Leer más</a>

    </div>
  </article>
</section>

这是我的 blog.component.ts 文件


import { Component, OnInit } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { StrapiService } from '../../../services/strapi.service';

import { Router } from '@angular/router';

@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.scss']
})
export class BlogComponent implements OnInit {

  datas:any=[];
  errores:string="";

  constructor(
    public strapiserv:StrapiService,
    private router: Router
  ) { }

  ngOnInit(): void {

    this.title.setTitle('Blog');

    this.strapiserv.getData().subscribe(res=>{

        this.datas= res as string[];

    }, error =>{
      console.log(error);
        if(error.status == 0){
            this.errores="Código del error: "+error.status+" \n Ha ocurrido un error del lado del cliente o un error de red.";
        }else{
            this.errores="Código del error: "+error.status+"\n\n"+error.statusText;
        }
    })

  }


}

这是我的 Angular 服务，名为 'strapi.service.ts'


import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class StrapiService {

  REST_API: string ='http://localhost:1337/articles';
  //https://strapi-dot-gmal-api-313723.uc.r.appspot.com/
  httpHeaders = new HttpHeaders().set('Content-Type', 'application/json');
  constructor(private httpClient: HttpClient) { }


  getData():Observable<any>{
    console.log();
    let API=this.REST_API;
    return this.httpClient.get(API,{headers:this.httpHeaders}) .pipe(
      map((data:any) => { 
      
        return data;
      }), catchError( error => {
        return throwError(error);
      })
    )
    
  }

  /*getItem( idx:number ){
    return this.data[idx];
  }*/
 
 
}

这是我的 pagina.component.ts 文件，我想在其中显示完整的详细博客


import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Router } from '@angular/router';

import { StrapiService } from '../../../../services/strapi.service';

@Component({
  selector: 'app-pagina',
  templateUrl: './pagina.component.html',
  styleUrls: ['./pagina.component.scss']
})
export class PaginaComponent implements OnInit {

  data:any = {};


  constructor( private activatedRoute: ActivatedRoute,
           private router: Router,
           public strapiserv:StrapiService
    ){ 

    this.activatedRoute.params.subscribe( params => {
      this.data = this.strapiserv.getData( params['id'] );
    });

  }

  ngOnInit(): void {
  }

}

我的路线是：

const routes: Routes = [
    { path: 'blog', component: BlogComponent },
    { path: 'pagina/:id', component: PaginaComponent },
];

Answer 1

你做的有很多问题：

'i' 是循环的索引，而不是您要使用的 'id' 。我猜 'id' 是一个属性数据，所以你应该指向 data.id

使用 [routerLink] 时不必使用相对路径（带括号）所以替换这个：

[routerLink]="['./pagina',i]"

有了这个：

[routerLink]="['/pagina', data.id]"  // remove the '.'

最后，在您的 blog.component.ts 文件中，您正在接收对象数组，因此您不必将其转换为字符串数组，this.datas= res; 就足够了

如何在 Angular 中显示博客详细信息 link

how to show a Blog detail link in Angular

javascript

typescript

strapi

angular