Angular2懒惰加载不显示数据,而是在网络中加载HTMLPAGE



angular2 lazyloading当我单击链接加载其组件,htmlpages,模块,但不显示 <router-outlet>中的html页面

>

MasterPage

<a [routerLink]="['Customer/Add']">Customer</a><br />
<a [routerLink]="['Employee/Add']">Employee</a><br />
    <router-outlet>
    </router-outlet>

customerComponent

import { Component } from "@angular/core"    
@Component({
     templateUrl: '../../ui/customer/customer.html'
})
export class CustomerComponent {
}

customermodule

@NgModule({
    imports: [RouterModule.forChild(CustomerRoute), ReactiveFormsModule, CommonModule, ReactiveFormsModule, FormsModule, HttpModule],
    declarations: [CustomerComponent],
    bootstrap: [CustomerComponent]
}) 
export class CustomerModule {    
}

customerRoute

import { Component } from "@angular/core"
import { CustomerComponent } from "../components/customer/customercomponent"
export const CustomerRoute = [
    { path: "Add", Component: CustomerComponent}
    ]

MainRoute

import { Component } from "@angular/core"
import { Routes } from "@angular/router"
import { HomePageComponent } from "../components/homepage/homepage"
export const ApplicationRoutes= [
    { path: '', component: HomePageComponent },
    { path: 'UI/MasterAngularPage.html' ,component: HomePageComponent },
    { path: 'Customer', loadChildren: '../modules/customermodule/customermodule#CustomerModule'},
]

使用以下代码在添加路由上重定向。

export const CustomerRoute = [
    { path: "", redirectTo: "Add", pathMatch:"full"},
    { path: "Add", Component: CustomerComponent}
]

从CustomerModule中删除引导代码。

@NgModule({
    imports: [RouterModule.forChild(CustomerRoute), ReactiveFormsModule, CommonModule, ReactiveFormsModule, FormsModule, HttpModule],
    declarations: [CustomerComponent]
}) 

希望它会有所帮助

最新更新