Question

Angular2 LazyLoading当我点击链接其加载其组件，Htmlpages，模块但不显示<router-outlet>中的Html页面

母版

<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'},

]

Answer 1

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

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]
})

希望它会有所帮助

Angular2 Lazy加载不显示数据但在网络

1 个答案: