角度路由教程问题

Question

我正在编写这个非常基本的 Angular 教程，并且我在教程的路由部分。单击产品名称时，应打开一个包含产品详细信息的页面。但是，它只显示文本“产品详细信息”。为什么它不起作用？

这就是我所看到的：

这是app-module.ts的内容

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { RouterModule } from "@angular/router";
import { ReactiveFormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";
import { TopBarComponent } from "./top-bar/top-bar.component";
import { ProductListComponent } from "./product-list/product-list.component";
import { ProductAlertsComponent } from "./product-alerts/product-alerts.component";
import { ProductDetailsComponent } from "./product-details/product-details.component";

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: "", component: ProductListComponent },
      { path: "products/:productId", component: ProductDetailsComponent }
    ])
  ],
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    ProductAlertsComponent,
    ProductDetailsComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

这是 Product-list.component.html

<h2>Products</h2>

<div *ngFor="let product of products">
  <h3>
    <a
      [title]="product.name + ' details'"
      [routerLink]="['/products', productId]"
    >
      {{ product.name }}
    </a>
  </h3>

  <p *ngIf="product.description">Description: {{ product.description }}</p>

  <button (click)="share()">
    Share
  </button>

  <app-product-alerts [product]="product" (notify)="onNotify()">
  </app-product-alerts>

  <app-product-alerts [product]="product"> </app-product-alerts>
</div>

这是 product-list.component.ts

import { Component } from "@angular/core";

import { products } from "../products";

@Component({
  selector: "app-product-list",
  templateUrl: "./product-list.component.html",
  styleUrls: ["./product-list.component.css"]
})
export class ProductListComponent {
  products = products;

  share() {
    window.alert("The product has been shared!");
  }

  onNotify() {
    window.alert("You will be notified when the product goes on sale");
  }
}

我错过了什么？ https://angular.io/start/routing

上的说明非常简单

Product-details.component.ts

import { Component, OnInit } from "@angular/core"; 
import { ActivatedRoute } from "@angular/router"; 
import { products } from "../products"; 

@Component
 ({ selector: "app-product-details",
    templateUrl: "./product-details.component.html", 
    styleUrls: ["./product-details.component.css"] }) 


export class ProductDetailsComponent implements OnInit { 
           product; 
constructor(private route: ActivatedRoute) {} 

    ngOnInit() { 
       this.route.paramMap.subscribe(
                          params => { this.product = 
                                 products[+params.get("productId")]; }); 
             } }

产品详细信息.component.html：

<h2>Product Details</h2>

<div *ngIf="product">
  <h3>{{ product.name }}</h3>
  <h4>{{ product.price | currency }}</h4>
  <p>{{ product.description }}</p>
</div>

应用模块.ts：

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { RouterModule } from "@angular/router";
import { ReactiveFormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";
import { TopBarComponent } from "./top-bar/top-bar.component";
import { ProductListComponent } from "./product-list/product-list.component";
import { ProductAlertsComponent } from "./product-alerts/product-alerts.component";
import { ProductDetailsComponent } from "./product-details/product-details.component";

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: "", component: ProductListComponent },
      { path: "products/:productId", component: ProductDetailsComponent }
    ])
  ],
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    ProductAlertsComponent,
    ProductDetailsComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 1

您看不到其余的产品详细信息，因为 productId 在您的模板中未定义。

在教程中，为了简单起见，他将每个产品的索引视为productId。

所以在Product-list.component.html 中，结构指令应该这样使用：

<div *ngFor="let product of products; index as productId">

index as productId 部分会将索引的值分配给 productId 变量，以便您可以在 routerLink 属性中使用它。

Answer 2

我是这方面的新手，但我想我明白了。查看教程中显示的这行代码：

   <a [title]="product.name + ' details'" [routerLink]="['/products', product.id]">

product.id 应该是从 app/products.ts 导出的对象数组中的对象中的字段。你会注意到我们没有这样的字段，所以你只需要像这样添加它：

export const products = [
  {
    name: 'Phone XL',
    price: 799,
    description: 'A large phone with one of the best screens',
    id: 'thisisID1', // this is added
  },
  {
    name: 'Phone Mini',
    price: 699,
    description: 'A great phone with one of the best cameras',
    id: 'thisisID2', // this is added
  },
  {
    name: 'Phone Standard',
    price: 299,
    description: '',
    id: 'thisisID3', // this is added
  }
];