Question

您好我正在创建一个具有路由功能的角度2应用。当我尝试访问例如网址时localhost /，index.html页面显示正确。但是当我尝试访问url localhost / risk时，它不会加载risk-list.component，然后加载risk-list.component.html页面。

以下是代码。有人能告诉我问题是什么吗？我已经在plunker中上传了代码以及plnkr.co/edit/y3tv8gdnXtGSg8Wl6F8H?p=preview

的index.html

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <title>Angular 2 Application</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>-->


    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>


    <link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
   <link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />
    <script src="node_modules/primeui/primeui-ng-all.min.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app/main').catch(function (err) { console.error(err); });
    </script>

</head>

<body>
    <my-app>Hello Hiscox Sample Application</my-app>
</body>

</html>

app.component.ts

import { Component } from '@angular/core';
import { DataTable, Column } from 'primeng/primeng';
import { Router } from  '@angular/router';
import {  Routes, RouterModule } from  '@angular/router';
import { WelcomeComponent } from  './components/home/welcome.component';
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="/risks" routerLinkActive="active">Risks</a>
      <a routerLink="/riskdetails" routerLinkActive="active">RiskDetails</a>
      <a routerLink="/welcome" routerLinkActive="active">Welcome</a>
    </nav>
    <div>
      <router-outlet>  </router-outlet>
    </div>
     ` 
    //,
    //directives: [RiskListComponent, DataTable, Column],

})

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

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { WelcomeComponent } from  './components/home/welcome.component';
import { RiskListComponent } from './components/risks/risk-list.component';
import { RiskDetailsComponent } from './components/risks/risk-detail.component';

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

@NgModule({
    imports: [BrowserModule, routing],
    declarations: [AppComponent, RiskListComponent, RiskDetailsComponent, WelcomeComponent],
    providers: [
        appRoutingProviders
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.routing.ts

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


const appRoutes: Routes = [
    { path: '/welcome', component: WelcomeComponent },
    { path: '/risks', component: RiskListComponent },
    { path: '/riskdetails', component: RiskDetailsComponent }
];

export const appRoutingProviders: any[] = [

];

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

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { RiskService } from './components/risks/risk.service';
import { HttpModule, JsonpModule } from  '@angular/http';
import './rxjs-operators';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';


const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule, [HttpModule, JsonpModule, RiskService]).catch(err => console.error(err));

风险list.component.ts

import { Component, OnInit } from '@angular/core';
import { IRisk } from './risk';
import { RiskService } from './risk.service';
import { DataTable, Column } from 'primeng/primeng';
import {Header} from 'primeng/primeng';
import {Footer} from 'primeng/primeng';
import {Paginator} from 'primeng/primeng';



@Component({
    selector: 'rm-risks',
    //directives: [DataTable, Column, Header, Footer, Paginator],
    templateUrl: '/app/components/risks/risk-list.component.html',
    providers: [RiskService]
    })  

export class RiskListComponent implements OnInit  {
    pageTitle: string = 'Risk List';
    errorMessage: string;
    risks: IRisk[];

    constructor(private _riskService: RiskService) {

        //this.risks = this._riskService.getRisks();
        console.log(this.risks);
    }

    getRisks(): void {
        this._riskService.getRisks();
    }

    ngOnInit(): void {                                                                                                                  
        this._riskService.getRisks();
    }

    //onSelect(hero: Hero): void {
    //    this.selectedHero = hero;
 //   }


};

风险list.component.html

<h3 class="first">{{pageTitle}}</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>

申请结构

Angular 2路由无法正常工作

0 个答案: