Как подключить компонент Angular 2 с представлением ASP.NET MVC?

Question

Я пытаюсь использовать Angular 2 с ASP.NET MVC, но не могу найти хороший способ сопоставления с представлением для компонента. Допустим, у меня есть HomeController с действием Index и представлением Index.cshtml. Внутри представления я добавляю элемент <home></home>, который должен быть сопоставлен с моим селектором компонентов Angular 2.

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

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

Мой компонент не будет запущен, если я не добавлю компонент в свойство bootstrap в своем AppModule. Это заставит мое приложение иметь несколько компонентов внутри свойства 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 { 
} 

Я надеюсь, что поможет вам.