路由到 angular2/.net 核心中的特定 id

Question

我无法让 Angular2/.Net Core 中的路由正常工作。

我已经使用 Angular 启动了一个默认的 .Net Core Web 项目，并成功地创建了一个具有适用视图组件的新控制器。该页面的目的是显示文档列表，并让您可以选择单击标题以在单独的视图中查看每个文档。

只要一切正常，它就会显示页面的内容，我还可以显示从数据库中检索到的文档列表。路由如下所示：

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        DocumentsComponent,
        HomeComponent
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'documents', component: DocumentsComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModuleShared {
}

我在每个文档上都有一个链接，因此当您单击它时，您会从列表/documents 转移到例如。 /documents/1

当我点击一个链接时，它只会在那里停留足够长的时间，所以我可以看到 URL 的变化，然后它会转到默认的后备 /home。

在 Startup.cs 我设置了默认路由处理：

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");
    routes.MapSpaFallbackRoute(
        name: "spa-fallback",
        defaults: new { controller = "Home", action = "Index" });
});

据我所知，“默认”地图路线应该选择/documents/1，但事实并非如此。我什至从未到达路由的后端方法。

[Produces("application/json")]
[Route("api/[controller]")]
public class DocumentsController : Controller
{
    private readonly DatabaseContext _context;

    public DocumentsController(DatabaseContext context)
    {
        _context = context;
    }

    // GET: api/Documents
    [HttpGet]
    public IActionResult GetDocuments()
    {
        // returns a JSON list of documents, works fine
    }

    // GET: api/Documents/5
    [HttpGet("{id}")]
    public async Task<IActionResult> GetDocument([FromRoute] int id)
    {
        //returns the specified document, is never even called
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        var document = await _context.Documents.SingleOrDefaultAsync(m => m.Id == id);

        if (document == null)
        {
            return NotFound();
        }

        return Ok(document);
    }

我需要做什么才能让特定路线发挥作用？

Answer 1

据我所知，“默认”地图路线应该选择/documents/1，但它没有。

不。默认路由不是这样配置的。您必须提供操作方法名称作为第二个参数以匹配默认路由。

/documents/getdocument/1

也就是说，它不会起作用。当您添加属性路由时，它会自动阻止上述路由。

因此，可以访问DocumentsController.GetDocument(int) 的唯一 URL 是：

/api/documents/1

这是因为您在控制器上定义了[Route("api/[controller]")]，这使得控制器中的每个操作都以这种方式添加前缀。

如果你想让/documents/1成为URL并使用属性路由，你可以使用：

[Produces("application/json")]
[Route("documents")]
public class DocumentsController : Controller
{
    private readonly DatabaseContext _context;

    public DocumentsController(DatabaseContext context)
    {
        _context = context;
    }

    // GET: api/Documents
    [HttpGet(Order = 2)]
    public IActionResult GetDocuments()
    {
        // returns a JSON list of documents, works fine
    }

    // GET: api/Documents/5
    [HttpGet("{id}", Order = 1)]
    public async Task<IActionResult> GetDocument([FromRoute] int id)
    {
        //returns the specified document, is never even called
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }

        var document = await _context.Documents.SingleOrDefaultAsync(m => m.Id == id);

        if (document == null)
        {
            return NotFound();
        }

        return Ok(document);
    }
}

或者，如果您想使用基于约定的路由，请从控制器、URL 模板中删除 [Route] 属性，并从每个操作方法上方的 HttpGet 中删除 Order 并使用：

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "documents",
        template: "documents/{id?}",
        defaults: new { controller = "Documents", action = "GetDocuments" });

    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");
});

Answer 2

您需要告诉角度路由器，在路径的documents 部分之后还有更多内容。它正在寻找与路由 /documents/1 匹配的组件，但没有找到它。如果您将/:id 添加到您的路径，它应该允许它将您的网址的第二部分映射到路由而不是重定向到home

{ path: 'documents/:id', component: DocumentsComponent },