angular2 및 .net mvc의 라우팅 사용 방법 라우팅

Question

서버 쪽 페이지 인증 및 권한 부여를하고 있습니다. 각 컨트롤러의 인덱스 페이지에. 그러나 각 인덱스 페이지 안에 앵귤러 2를 사용하고자하므로 앵귤러 2 라우팅을 사용하고 싶습니다.

나는 testsuite.component.ts 페이지

import { Directive, Component, OnInit } from '@angular/core'; 
import {DataTableModule, SharedModule} from 'primeng/primeng'; 
import { TestSuite } from './testsuite'; 


    @Component({ 
     // moduleId: module.id, 
     selector: 'testsuite-header', 
     template: ` 
    <div class="ui-widget-header ui-helper-clearfix" style="padding:4px 10px;border-bottom: 0 none"> 
     <i class="fa fa-search" style="float:left;margin:4px 4px 0 0"></i> 
     <input #gb type="text" pInputText size="50" style="float:left" placeholder="Global Filter"> 
    </div> 
    <div class="ui-datatable ui-widget"> 
    <div class="ui-datatable-tablewrapper"> 
    <p-dataTable [value]="testSuites" [rows]="5" [paginator]="true" [globalFilter]="gb" [editable]="true"> 
     <p-column field="testSuiteId" header="TestSuites (startsWith)" [style]="{'width':'10%'}" [filter]="true" [editable]="true"></p-column> 
     <p-column field="projectId" header="ProjectId (contains)" [style]="{'width':'10%'}" [filter]="true" filterMatchMode="contains" [editable]="true"></p-column> 
     <p-column field="name" header="Name (startsWith)" [style]="{'width':'30%'}" [filter]="true" [editable]="true"></p-column> 
     <p-column field="description" header="Description (endsWith)" [style]="{'width':'40%'}" [filter]="true" filterMatchMode="endsWith" [editable]="true"></p-column> 
    <p-column field="isActive" header="IsActive (endsWith)" [style]="{'width':'10%'}" [filter]="true" filterMatchMode="endsWith" [editable]="true"></p-column> 
    </p-dataTable> 
    </div> 
    </div>    `, 
     // providers: [TestSuiteService] 




     }) 
export class TestSuiteComponent{} 

을에

app.component.ts처럼

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

@Component({ 
    selector: 'my-app', 
    template:'' 
}) 
export class AppComponent { 

} 

app.module.ts

import {NgModule}  from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { RouterModule } from '@angular/router' 
import { TestSuiteComponent } from './testsuite/testsuite.component' 
//import {InputTextModule, CalendarModule, DataTable} from 'primeng/primeng'; 
import { DataTableModule, SharedModule } from 'primeng/primeng'; 

@NgModule({ 
    imports: [BrowserModule, DataTableModule, SharedModule, RouterModule.forRoot([ 
     { 
      path: 'TestSuiteEditor/Index', 
      component: TestSuiteComponent 
     }, 
     { 
      path: 'Home/Index', 
      component: TestSuiteComponent 
     } 
    ])], 
    declarations: [AppComponent,TestSuiteComponent], 
    bootstrap: [ AppComponent] 
}) 
export class AppModule { } 

을 시도 홈/Index.cshtml

<testsuite-header>Loading....</testsuite-header> 

하지만로드 주 출구를 찾을 수 없습니다

의 오류를 던지는 'TestSuiteComponent'

Answer 1

당신은 응용 프로그램에서 라우터 콘센트를 추가하는 잊어 버린. 당신은 this-

<router-outlet></router-outlet> 

처럼 AppComponent에 라우터 콘센트를 정의 할 수 있습니다 그래서 당신의 AppComponent의 뜻을 내가 만든

당신의 도움을위한 솔루션, 덕분에 발견 this-

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

@Component({ 
    selector: 'my-app', 
    template:` 
<!-- Routed views go here --> 
<router-outlet></router-outlet> 
` 
}) 
export class AppComponent { 

} 

Answer 2

처럼 보인다 경로는 내 MVC 라우팅과 비슷하며 routing.ts에 추가되었습니다.

각도 2 루팅은 활성 URL을로드하는 기능이 있으므로 자동으로 해당 URL에 할당 된 구성 요소를로드합니다.