下一个和上一个按钮的onclick，我的组件内容应随路由器ID和标头ID更改

Question

我在单击这些按钮时使用“上一个”和“下一个”按钮制作了一个组件“ product-detail.component.html”，我的视图应随路由器链接和标题ID动态变化，而我的组件“ product-detail.component.ts ”
请在错误的地方帮我，感谢您的早日答复。

product-detail.component.html

<div class="card" *ngIf='product'>   <div class="card-header">
    {{pageTitle + ': ' + product.productName}}   </div>   <div class='card-body'>
      <div class='row'>
        <div class='col-md-8'>
          <div class='row'>
            <div class='col-md-4'>Name:</div>
            <div class='col-md-8'>{{product.productName}}</div>
          </div>
          <div class='row'>
            <div class='col-md-4'>Code:</div>
            <div class='col-md-8'>{{product.productCode | lowercase | convertToSpaces: '-'}}</div>
          </div>
          <div class='row'>
            <div class='col-md-4'>Description:</div>
            <div class='col-md-8'>{{product.description}}</div>
          </div>
          <div class='row'>
            <div class='col-md-4'>Availability:</div>
            <div class='col-md-8'>{{product.releaseDate}}</div>
          </div>
          <div class='row'>
            <div class='col-md-4'>Price:</div>
            <div class='col-md-8'>{{product.price|currency:'USD':'symbol'}}</div>
          </div>
          <div class='row'>
            <div class='col-md-4'>5 Star Rating:</div>
            <div class='col-md-8'>
              <pm-star [rating]='product.starRating'>
              </pm-star>
            </div>
          </div>
        </div>

        <div class='col-md-4'>
          <img class='center-block img-responsive'
               [style.width.px]='200'
               [style.margin.px]='2'
               [src]='product.imageUrl'
               [title]='product.productName'>
        </div>
      </div>
    </div>
    <div class='card-footer'>
      <button class='btn btn-outline-secondary'
              (click)='onBack()'
              style='width:80px'>
        <i class='fa fa-chevron-left'></i> Back
      </button>

      <div class="pull-right">
          <button class='btn btn-danger'
                  (click)='goPrevious()'
                  style='width:80px'> Previous
          </button>

          <button class='btn btn-primary'
                  (click)='goNext()'
                  style='width:80px'> Next
          </button>
      </div>
    </div> </div>

product-detail.component.ts

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

@Component({   templateUrl: './product-detail.component.html',   styleUrls: ['./product-detail.component.css'] }) export class ProductDetailComponent implements OnInit {   pageTitle: string = 'Product Detail';   product: IProduct;

  constructor(private route: ActivatedRoute,
              private router: Router) { }

  ngOnInit() {   
     this.route.params.subscribe((params : Params)=>{
     let id = parseInt(params ['id']);
     this.pageTitle += `: ${id}`;
     this.product = {
       "productId": id,
       "productName": "Leaf Rake",
       "productCode": "GDN-0011",
       "releaseDate": "March 19, 2016",
       "description": "Leaf rake with 48-inch wooden handle.",
       "price": 19.95,
       "starRating": 3.2,
       "imageUrl": "assets/images/cutter.jpg"
    }   })    }

  onBack(): void {
      this.router.navigate(['/products']);   }

  goPrevious(){
    let previousId = this.product.productId - 1;
    this.router.navigate(['/products', previousId]);   }

  goNext(){
    let nextId = this.product.productId + 1;
    this.router.navigate(['/products', nextId]);   }

}

Answer 1

我只是尝试了您的代码，所以效果很好。

我在组件中更改了一行：

this.pageTitle = `Product Detail: ${id}`;

您不能仅连接标题，因为每次单击按钮时都会重复此代码。

您不会更改产品，因为您的ngOnInit已对产品进行了硬编码。 唯一会改变的是标题：