Question

我正在尝试将Angular 2与ASP.NET MVC一起使用，但无法找到映射到组件视图的好方法。假设我有一个带有Index动作和Index.cshtml视图的HomeController。在视图中，我添加了一个<home></home>元素，以映射到我的Angular 2组件的选择器。

import { Component } from '@angular/core';

@Component({
    selector: 'home',
    template: '<h1>Home component</h1>'
})
export class HomeComponent {
}

除非我将组件添加到AppModule中的bootstrap属性，否则不会触发我的组件。这将导致我的应用程序在bootstrap属性中包含多个组件。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent, HomeComponent],
    bootstrap: [AppComponent, HomeComponent]
})
export class AppModule {
}

这是正确的方法吗？

如果我在局部视图中有另一个组件的元素选择器，则只会调用我的第一个局部视图的组件。如何在每次呈现局部视图时调用组件？即使我的部分视图在同一页面上多次呈现？

Answer 1

您可以添加模板控制器，找到正确的视图并进行渲染。

让我们看一个样本，模板控制器，

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Mvc;

// For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860

namespace DemoApp.Controllers
{
    [Route("template")]
    public class TemplateController : Controller
    {
        [Route("{component}/{view}")]
        public IActionResult Get(string component, string view)
        {
            string path = string.Format("~/Views/{0}/{1}.cshtml", component, view);

            return PartialView(viewName: path);
        }

        [Route("{area}/{component}/{view}")]
        public IActionResult Get(string area, string component, string view)
        {
            string path = string.Format("~/Views/{0}/{1}/{2}.cshtml", area, component, view);

            return PartialView(viewName: path);
        }
    }
}

在Angular2组件中，您可以使用如下的模板

import { Component, Inject, OnInit } from '@angular/core';
import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms';

@Component({
    selector: 'overview',
    templateUrl: 'template/overview/index'
})
export class OverviewComponent {
}

我希望能帮到你。

如何将Angular 2组件与ASP.NET MVC视图连接？

1 个答案: