Angular 2 구성 요소를 ASP.NET MVC 뷰에 연결하는 방법은 무엇입니까?

Question

ASP.NET MVC에서 Angular 2를 사용하려하지만 구성 요소에 대한 뷰에 매핑하는 좋은 방법을 찾을 수 없습니다. HomeController에 Index 액션과 Index.cshtml 뷰가 있다고 가정 해 보겠습니다. 뷰 내부에서 <home></home> 요소를 추가하여 Angular 2 구성 요소의 선택기에 매핑합니다.

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

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

내 AppModule의 부트 스트랩 속성에 구성 요소를 추가하지 않으면 내 구성 요소가 트리거되지 않습니다. 이것은 내 애플 리케이션 부트 스트랩 속성 안에 여러 구성 요소가 발생합니다.

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

올바른보기를 찾고 렌더링하는 템플릿 컨트롤러를 추가 할 수 있습니다.

는

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

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

나는 그것이 당신을 도움이되기를 바랍니다, 당신의 Angular2 구성 요소에서

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); 
     } 
    } 
} 

, 당신은 다음과 같이 템플릿을 사용할 수, 샘플, 템플릿 컨트롤러를 보자.