@Component 中的 Angularjs2 'templateUrl' - 如何显示剃刀视图

Question

如何在@Component 的'templateUrl' 中呈现ASP.NET MVC5 Razor 视图(.cshtml)。使用“/Home/Index”时，页面挂起。

import { Component, OnInit } from '@angular/core';
import { Product } from './model';
import { InventoryService } from './dataService';

@Component({
    selector: 'my-app',
    template: `<ul>
        <li *ngFor="let product of products">
            <h4>{{product.getProducts()}}</h4>
        </li>
    </ul>`,
    //templateUrl: '/Home/Index',
    providers: [InventoryService]
})
export class AppComponent implements OnInit {
    products: Product[];

    constructor(private productService: InventoryService) { }

    ngOnInit(): void {
        this.productService.getAll()
            .then(products => this.products = products);
    }
}

服务器端路由（RouteConfig.cs）：

routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );

Angular的主页是MVC的共享_Layout.cshtml文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->

    <script src="~/node_modules/core-js/client/shim.min.js"></script>
    <script src="~/node_modules/zone.js/dist/zone.js"></script>
    <script src="~/node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="~/Scripts/systemjs.config.js"></script>
    <script>
        System.import('../Scripts/main').catch(function (err)
        {
            console.error(err);
        });
    </script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

Web api 控制器 (ProductController.cs) 可直接访问并产生有效的 JSON 输出。

[Route("api/Product/GetProducts")]
        public IEnumerable<ProductJSON> GetProducts()
        {
            IQueryable<ProductJSON> products = _context.Products.Select(
                    p => new ProductJSON
                    {
                        Name = p.Name,
                        Category = p.Category,
                        Price = p.Price
                    });
            return products.ToList();
        }

HomeController.cs如下：-

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }

Index.cshtml如下：-

@{
    ViewBag.Title = "Home Page";
}

<my-app>Loading...</my-app>

我可以在使用 'template' 时成功访问“/Home/Index”路径，但应用程序挂起并且无法使用 'templateUrl'

访问

@Component({
    selector: 'my-app',
    template: `<ul>
        <li *ngFor="let product of products">
            <h4>{{product.getProducts()}}</h4>
        </li>
    </ul>`,
    //templateUrl: '/Home/Index',
    providers: [InventoryService]
})

Answer 1

在混合使用 ASP.NET MVC5 和 Angular 时，您需要一些不同的方法，您需要将根组件路径和 ASP.NET 默认路径分开。

试试下面，

创建一个新的控制器让我们说 ComponentsController 如下所示，

public class ComponentsController : Controller
    {
        // GET: Components
        public ActionResult App()
        {
            return View();
        }
 }

并添加一个 Components\App.cshtml，确保没有使用共享 _Layout。

     <ul>
        <li *ngFor="let product of products">
            <h4>{{product.getProducts()}}</h4>
        </li>
    </ul>

更新 AppComponent 模板 URL，以便它使用新路径，

templateUrl: '/Components/App'

也为您的 Index.cshtml 删除共享布局并直接从 Index.cshtml 获取它，根据您的项目结构修复路径

应该可以。

使用基本应用程序检查此 Github Repo。

希望对您有所帮助！！

@Component 中的 Angularjs2 'templateUrl' - 如何显示剃刀视图

Angularjs2 'templateUrl' in @Component - how to display razor view

asp.net-mvc-5

angular2-routing

angular2-template

angular2-services

angular2-directives