Javascript I'；我正在使用angular开发一个简单的列表应用程序，当我单击时，它将显示特定项目的详细信息。请检查我的密码

我正在开发一个简单的列表应用程序，它在单击时会显示特定项目的详细信息。该项目的详细信息应该在一个带有后退按钮的新HTML页面中打开。我正在使用graphql获取数据。我已经在app component detail.ts文件上做了一些工作，但我不知道在单击某个项目时如何打开详细信息页面。详细信息页面包含已显示在列表页面上的项目的标题和说明

我已经列了一张单子。我只想创建一个详细的页面，通过单击项目打开

我已经上传了我的全部代码，请检查现场测试

应用程序组件详细信息。ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
 
import { ProductService } from './product.service';
import { Product } from './product';
 
 
@Component({
  templateUrl: './product-detail.component.html',
})
 
export class ProductDetailComponent
{
 
   product:Product;
   id;
   
   constructor(private _Activatedroute:ActivatedRoute,
               private _router:Router,
               private _productService:ProductService){
   }
 
  
   /* Using snapshot */
   // ngOnInit() {
 
   //    //This still works but is deprecated
   //    //this.id=this._Activatedroute.snapshot.params['id'];  
 
   //    this.id=this._Activatedroute.snapshot.paramMap.get("id");
 
      
   //    let products=this._productService.getProducts();
   //    this.product=products.find(p => p.productID==this.id);
   // }
   
 
   /* Using Subscribe */
   
   sub;
 
   ngOnInit() {
 
      this.sub=this._Activatedroute.paramMap.subscribe(params => { 
         console.log(params);
          this.id = params.get('id'); 
          let products=this._productService.getProducts();
          this.product=products.find(p => p.productID==this.id);    
      });
 
      // This params is deprecated
 
      //this.sub=this._Activatedroute.params.subscribe(params => { 
      //    this.id = params['id']; 
      //    let products=this._productService.getProducts();
      //    this.product=products.find(p => p.productID==this.id);    
      //
      //});
   }
 
   ngOnDestroy() {
     this.sub.unsubscribe();
   }
   
   onBack(): void {
      this._router.navigate(['product']);
   }
}
 

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { ChallengesService } from './services/challenges.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  challenges$: Observable<any>;
  constructor(private challengesService: ChallengesService) {
    this.challenges$ = this.challengesService.getChallenges();
  }


}

app.component.html

<div>
  <h1 class="text-center">Challenge Logo Viewer App</h1>
</div>

<div *ngFor="let challenge of challenges$ | async" class="mt-4">
  <a [routerLink]="">
  <div class="list-group">
    <div class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">{{challenge.node.title[0].text}}</h5>
        <span><i class="far fa-heart font-size-50"></i></span>
      </div>
      <p class="mb-1">{{challenge.node.teaser[0].text}}</p>
    </div>
  </div>
</a>
</div>
<router-outlet></router-outlet>

挑战徽标查看器应用程序
{{challenge.node.title[0].text}
{{challenge.node.trister[0].text}

应用程序组件.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
 
import { ProductService } from './product.service';
import { Product } from './product';
 
 
@Component({
  templateUrl: './product-detail.component.html',
})
 
export class ProductDetailComponent
{
 
   product:Product;
   id;
   
   constructor(private _Activatedroute:ActivatedRoute,
               private _router:Router,
               private _productService:ProductService){
   }
 
  
   /* Using snapshot */
   // ngOnInit() {
 
   //    //This still works but is deprecated
   //    //this.id=this._Activatedroute.snapshot.params['id'];  
 
   //    this.id=this._Activatedroute.snapshot.paramMap.get("id");
 
      
   //    let products=this._productService.getProducts();
   //    this.product=products.find(p => p.productID==this.id);
   // }
   
 
   /* Using Subscribe */
   
   sub;
 
   ngOnInit() {
 
      this.sub=this._Activatedroute.paramMap.subscribe(params => { 
         console.log(params);
          this.id = params.get('id'); 
          let products=this._productService.getProducts();
          this.product=products.find(p => p.productID==this.id);    
      });
 
      // This params is deprecated
 
      //this.sub=this._Activatedroute.params.subscribe(params => { 
      //    this.id = params['id']; 
      //    let products=this._productService.getProducts();
      //    this.product=products.find(p => p.productID==this.id);    
      //
      //});
   }
 
   ngOnDestroy() {
     this.sub.unsubscribe();
   }
   
   onBack(): void {
      this._router.navigate(['product']);
   }
}
 

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { ChallengesService } from './services/challenges.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  challenges$: Observable<any>;
  constructor(private challengesService: ChallengesService) {
    this.challenges$ = this.challengesService.getChallenges();
  }


}

从'@angular/core'导入{Component}；
从“rxjs”导入{Observable}；
从“./services/challenges.service”导入{challengeService}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
挑战：可见；
构造函数（私有challengeservice:challengeservice）{
this.challenges$=this.challengeService.getChallenges（）；
}
}

在这里，您可以查看一个非常好的教程，了解您试图做的事情。

---

我试过这个，但我不明白其中的逻辑。你能解释一下吗？你给我的链接和我想要的很相似，但它在同一页上显示了细节。我想在新的HTML页面上显示后退按钮