如何修复 ASP.NET Core Web 应用程序中使用的 Angular 组件中的路由？

Question

我关注Angular tutorial from documentation，它来到了路由。这是一个试用示例应用程序，主要区别在于我的示例与 ASP.NET Core 2.2 Web 应用程序集成，Angular 组件显示在 .cshtml 视图中。

请注意，我在我的 ASP.NET Core 视图中使用 Angular 组件选择器，就像在 index.cshtml 中这样，所有 Angular 视图都在其中呈现：

Index View

<current-time></current-time>
<app-top-bar></app-top-bar>
<app-product-list></app-product-list>

一切都显示得很好，直到我尝试在 product-list.component.html 中添加到 ProductListComponent 的路由：

    <h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'" [routerLink]="['/products', product.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>

</div>

ProductListComponent 在 app.module.ts 中声明如下：

import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { APP_BASE_HREF } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';

import { CurrentTimeComponent } from './current-time/current-time.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({
  declarations: [
    CurrentTimeComponent,
    TopBarComponent,
    ProductListComponent,
    ProductAlertsComponent,
    ProductDetailsComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      { path: '', component: ProductListComponent },
      { path: 'products/:productId', component: ProductDetailsComponent },
    ])
  ],
  exports: [
    CurrentTimeComponent,
    TopBarComponent,
    ProductListComponent
  ],
  providers: [{ provide: APP_BASE_HREF, useValue: '/' }], //for ASP.NET Core
})
export class AppModule {
  constructor(private injector: Injector) {
  }

  ngDoBootstrap() {
    customElements.define('current-time', createCustomElement(CurrentTimeComponent, { injector: this.injector }));
    customElements.define('app-top-bar', createCustomElement(TopBarComponent, { injector: this.injector }));
    customElements.define('app-product-list', createCustomElement(ProductListComponent, { injector: this.injector }));
  }
}

根据教程，在 product-list 视图中将鼠标指针悬停在 product 上时，我应该收到锚路径：http://localhost:59119/products/1，但我收到的是：http://localhost:59119/products/undefined。

另一件事是，当我将浏览器导航到http://localhost:59119/products/1 时，我会收到404。

请注意，在我的 app.module.ts 中我没有 bootstrap: [ AppComponent]。我假设，如果 Angular 视图由 .cshtml 视图显示，我不需要这个。它有什么改变吗？我开始怀疑是的。

无论如何，有什么方法可以让我导航到产品详细信息吗？

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')];
    });
  }

}

productc.ts：

export const products = [
  {
    productId: 1,
    name: 'Phone XL',
    price: 799,
    description: 'A large phone with one of the best screens'
  },
  {
    productId: 2,
    name: 'Phone Mini',
    price: 699,
    description: 'A great phone with one of the best cameras'
  },
  {
    productId: 3,
    name: 'Phone Standard',
    price: 299,
    description: ''
  }
];

product-list.component.ts：

import { Component, OnInit } 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 implements OnInit {
  products = products;

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

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

  constructor() { }

  ngOnInit() {
  }
}

Answer 1

对于您在未定义时提出的第一个问题

http://localhost:59119/products/undefined

为此，您必须更新 html -

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'" [routerLink]="['/products', productId]">
      {{ product.name }}
    </a>
  </h3>(...)

</div>

这里 productId 未定义，这就是您收到错误的原因。

对于第二个问题，您会收到404，因为这里

  { path: 'products/:productId', component: ProductDetailsComponent },

如您所见，该路径 ProductDetailsComponent 是为该路由定义的，而 angular 不会路由到 cshtml 文件。