如何修复 ASP.NET 核心网络应用程序中使用的 Angular 组件中的路由？

Question

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

请注意，我在 ASP.NET 核心视图中使用 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]。我假设，如果 .cshtml 视图显示 Angular 视图，我不需要这个。它有什么改变吗？我开始怀疑是的。

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

产品-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: ''
  }
];

产品-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 文件.

如何修复 ASP.NET 核心网络应用程序中使用的 Angular 组件中的路由？

How to fix routing in my Angular component used in ASP.NET Core web app?

routes

typescript

angular

asp.net-core-2.2