如何使用angular2和.net mvc的路由

我正在對服務器端頁面進行身份驗證和授權。在每個控制器的索引頁上。但是在每個索引頁面內我想使用角2，因此我想使用角2路由。如何使用angular2和.net mvc的路由

我試圖像

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 { }

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{}

上Home/Index.cshtml

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

但它拋出的

錯誤無法找到主要出口到裝載「TestSuiteComponent」

來源

2016-10-15 Engineer

你忘了添加路由器的出口在您的應用程序。您可以在AppComponent定義路由器出口像這個 -

<router-outlet></router-outlet>

所以你AppComponent意志看起來像這 -

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

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

}

來源

2016-10-15 09:50:31 Sanket

我已經添加了路由器插座，但我們想要從服務器加載索引頁，然後在該頁面編輯刪除操作，通過角2 – Engineer

我發現

我已經創建瞭解決方案，感謝您的幫助類似於我的MVC路由並添加到routing.ts中的路徑。

由於角度2路由具有加載活動URL的功能，所以它會自動加載分配給該URL的組件。

來源

2016-10-18 07:10:52 Engineer

可以請你分享更多細節 – Sanket

如何使用angular2和.net mvc的路由

回答

相關問題