路由到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模板和HttpGet Order中HttpGet每种操作方法上方的[Route]属性，并使用：

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 。 它正在寻找与路由/documents/1匹配的组件，但找不到它。 如果将/:id添加到路径，则应允许其将网址的第二部分映射到路由，而不是重定向到home

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