Question

我正在尝试使用ASP.Net Core应用程序创建一个Angular 2应用程序。路由似乎不起作用。当我执行应用程序时，将显示app.html页面，如startup.cs文件中所述。当我键入例如localhost / risk等时，我应该可以通过url导航。请注意，app.html中的路由循环不会显示任何内容，因为路由未初始化。我看到app.html只有标题MVC，Angular2和样本。

有人可以帮帮我吗？

Application Folder Structure screenshot

app.module.ts

HList

app.routing.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }  from '../app.component';
import { RiskListComponent } from './risks/risk-list.component';
import { RiskDetailsComponent } from './risks/risk-detail.component';
import { RiskService } from './risks/risk.service';

import {
    LocationStrategy,
    HashLocationStrategy
} from '@angular/common';

import { routing,
    appRoutingProviders}  from './app.routing';

@NgModule({
    imports: [BrowserModule, FormsModule, routing],
    declarations: [AppComponent, RiskListComponent, RiskDetailsComponent],
    providers: [
        appRoutingProviders, RiskService, { provide: LocationStrategy, useClass: HashLocationStrategy }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

风险list.component.html

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RiskListComponent } from './risks/risk-list.component';
import { RiskDetailsComponent } from './risks/risk-detail.component';



const appRoutes: Routes = [
    { path: '', pathMatch: 'full', component: RiskListComponent },
    { path: 'risks/:id', component: RiskDetailsComponent },

];


export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

risk.ts

<h3 class="first">{{title}}</h3>
<!--[rows]="5" [paginator]="true" [pageLinks]="2" [rowsPerPageOptions]="[5,10,20]"-->
<!--<p-paginator rows="10" totalRecords="100" pageLinkSize="3"></p-paginator>-->

<div>{{risks | json}}</div>

<p-dataTable [value]="risks" [paginator]="true" rows="5" totalRecords="100" pageLinkSize="3" [rowsPerPageOptions]="[5,10,20]"  [sortMode]="multiple" sortField="inceptionDate" [sortOrder]="1" >
    <header>List of Risks</header>




        <!--<footer>Choose from the list.</footer>-->

        <p-column field="reference" header="Reference (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="insuredName" header="Insured Name (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="inceptionDate" header="Inception Date (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="riskType" header="Risk Type (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="status" header="Status (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="grossPremium" header="Gross Premium (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="allocatedTo" header="Allocated To (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="allocatedCompany" header="Allocated Company (contains)" [filter]="true" sortable="true"></p-column>

</p-dataTable>

app.component.ts

export class Risk {
    riskId: number;
    reference: string;
    insuredName: string;
    inceptionDate: string;
    riskType: string;
    status: string;
    grossPremium: number;
    allocatedTo: string;
    allocatedCompany: string;

}

app.html

import { Component } from '@angular/core';
import { DataTable, Column } from 'primeng/primeng';
import { Router } from  '@angular/router';
import {  Routes, RouterModule } from  '@angular/router';
import { RiskListComponent } from './components/risks/risk-list.component';
import { RiskDetailsComponent } from './components/risks/risk-detail.component';
import { ModuleWithProviders } from '@angular/core';
import './rxjs-operators';


//import { RiskService } from './components/risks/risk.service';

    @Component({
        selector: 'my-app',
        template: `
        <div>
            <h1>{{pageTitle}}</h1>
              <rm-risks> </rm-risks> 
        </div>
         <nav>
          <a routerLink="/dashboard" >Dashboard</a>
          <a routerLink="/risks" >Risks</a>

        </nav>
        <div>
          <router-outlet>  </router-outlet>
        </div>
         `
        // <a routerLink="/riskdetails" routerLinkActive="active">RiskDetails</a>
        //< a routerLink="/welcome" routerLinkActive="active" > Welcome < /a>
        //,
        //directives: [RiskListComponent, DataTable, Column],

    })

    export class AppComponent {
        pageTitle: string = 'Test UK Trader';
    }

startup.cs

<div class="page-header">
<h1>
    MVC, Angular2
    <br>
    <small>Sample</small>
</h1>
</div>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <span class="glyphicon glyphicon-sunglasses"></span>
            </a>
        </div>
        <ul *ngIf="routes != null" class="nav navbar-nav">
            <li *ngFor="#rt of routes" [class.active]="getLinkStyle(rt)">
                <a [routerLink]="[rt.name]">{{rt.name}}</a>
            </li>
        </ul>
    </div>
</nav>
<div class="content padding has-header">
    <router-outlet></router-outlet>
</div>

Answer 1

我看到你在app.html和app.component中指定了router-outlet。我认为这可能令人困惑。

ASP.Net核心中的Angular 2路由

1 个答案: