Question

我正在开发一个有角度的应用程序。当前版本是6.0.9。如果我单击主页产品中的某个产品，我想导航到单个产品页面。但是它将在同一页面上导航页面。另外，如果折扣为零，我也不想显示折扣。我为此使用ngIf指令。但是所有折扣都显示在图片中。My Homepage

What I got

我的代码是：

component.html：

SCB->VTOR = ...

Route.ts：

<div *ngIf="!discountPercent">
    <div class="col-md-3" *ngFor="let product of productList">
      <figure class="card card-product"> 
        <div class="starburst discount" id="star" #rotateEl>
          <span></span>
          <span>{{product.Discount}}%</span>
        </div>
        <div class="img-wrap">
         <a routerLink="/product-details"><img src="assets/{{ product.Image }}"></a> 
        </div>
        <div class="parent">
        <div class="block-ellipsis">
          <span>{{product.ProductName}}</span>
        </div>
      </div>

          <div class="price-wrap h5">
            <span class="price-new">Rs.{{product.DiscountedPrice}}</span> &nbsp;
            <del class="price-old">Rs.{{product.OriginalPrice}}</del>
          </div>
</figure>
    </div>
  </div>

component.ts

export const appRoutes: Routes = [
{ path: 'product-details', component: ProductDetailsComponent}
];

Answer 1

您需要创建一个负责展示单个产品的组件。然后定义一条通往该组件的路线。

这里是link，显示了如何定义角度路线

Answer 2

首先，要解决显示0％的问题，应将其与数字进行比较。

<div *ngIf="discountPercent !== 0">
  ....
</div>

第二，您只有一条路线，这是展示所有产品的路线，因此现在您必须添加新路线和新组件。

Route.ts

{ path: 'product-details', component: ProductDetailsComponent},
{ path: 'product-details/:id', component: ProductComponent}

这将使您对每个产品都有单独的页面。现在，要知道您看到了哪种产品，您拥有该产品的ID，并通过URL将其传递给该产品。例如，如果您想查看有关产品22的信息，则必须导航到“ yourpage.com/product-details/22”。

在那里，您必须从URL参数中恢复新组件（ProductComponent）中的ID。

Product.component.ts

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

export class ProductComponent implements OnInit {
    public product: any;

    constructor( private route: ActivatedRoute ) {

    }

    ngOnInit() {
       this.route.params.subscribe(
          params => {
            const id = +params['id']; // Recovering the id from URL
            this.loadProductInformation(id);
          }
       )
    }

    private loadProductInformation(id: number) {
       // Here you make the call to your service to get your product data

    }
}

最后，像在ProductDetailsComponent中所做的那样，创建一些HTML以显示信息。

编辑：我忘记了您还必须更改ProductDetailsComponent中的RouterLink以导航到产品ID。为此，您必须执行类似routerLink="/product-details/{{product.id}}"

的操作

Answer 3

嗯，您必须这样编码：

import { Router, NavigationEnd } from '@angular/router'; constructor(private router: Router) { } this.router.navigate(['/your router']);

如何导航到其他页面

3 个答案: