我的简单应用程序有一个名为app module的根模块和一个名为homemodule的功能模块。我试图为一个名为homecomponent的组件(它是homemodule的一部分)创建一个路由,但我得到的只是
Module "HomeModule" has no exported member 'HomeComponent'
应用程序路由.ts
import { Routes, RouterModule } from '@angular/router'
import { HomeComponent } from './Home/home.module.ts' // HomeComponent not found
const appRoutes: Routes = [
{ path: '', component: HomeComponent }
];
export const appRoutingProviders: any[] = [
];
export const routing = RouterModule.forRoot(appRoutes);
主页.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HomeComponent } from './home.component.ts';
@NgModule({
imports: [ BrowserModule ],
declarations: [ HomeComponent ],
exports: [ HomeComponent ]
})
export class HomeModule { }
主页.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'home',
template: '<h1>Hello World</h1>'
})
export class HomeComponent { }
为什么Homemodule不导出其组件?
最佳答案
RF1: http://angularjs.blogspot.com/2016/08/angular-2-rc5-ngmodules-lazy-loading.html
Ref2: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#imports
问题1:NGModel导入/导出
import { HomeComponent } from './Home/home.module.ts' // HomeComponent not found
home.module.ts导出
HomeModule
,而不是HomeComponent
。@ngmodule导出使这些导出组件的angular2特性可用于导入模块。功能可以是模板指令、选择器、可注入服务等。
主元件功能是其选择器。因此,将
HomeModule
导入app.module将使HomeComponent
选择器home
可用于任何app.module组件。要明确导出homemodule homecomponent,需要index.js和index.d.ts。(灵感来自法比奥·安图内斯的回答)
使用选择器
home
要使用此功能,home.module.ts中需要
exports: [ HomeComponent ]
。应用模块.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeModule } from './Home/home.module';
import { routing } from './app.routing';
@NgModule({
imports: [
BrowserModule,
HomeModule,
routing],
declarations: [
AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
使用选择器的app.component.ts
home
import {Component} from '@angular/core';
@Component({
selector: 'app-component',
template: `
<h1>{{title}}</h1>
<home></home>`
})
export class AppComponent {
title = 'APP';
}
使用家庭组件
要直接使用homecomponent,我们需要在./home中添加index.js和index.d.ts
/主页/索引.js
exports.HomeModule = require('./home.module').HomeModule;
exports.HomeComponent = require('./home.component').HomeComponent;
/主页/索引D.TS
exports * './home.module';
exports * from './home.component';
然后像npm包一样导入home模块
应用程序路由.ts
// We are importing the module directory, not ./Home/home.module.ts
import { HomeComponent } from './Home';
import { Routes, RouterModule } from '@angular/router'
const appRoutes: Routes = [
{ path: '', component: HomeComponent }
];
export const appRoutingProviders: any[] = [
];
export const routing = RouterModule.forRoot(appRoutes);
问题2:路由(到子模块)
要路由到模块,子模块需要有自己的路由器设置。
在父路由(app.routing.ts)中使用
loadChildren
。在子路由(home.routing.ts)中使用
RouterModule.forChild
。应用模块.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeModule } from './Home/home.module';
import { routing } from './app.routing';
@NgModule({
imports: [
BrowserModule,
HomeModule,
routing],
declarations: [
AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
应用组件
import {Component} from '@angular/core';
@Component({
selector: 'app-component',
template: `
<h1>{{title}}</h1>
<nav>
<a routerLink="/home" routerLinkActive="active">Home</a>
</nav>
<router-outlet></router-outlet>`
})
export class AppComponent {
title = 'APP';
}
应用程序路由.ts
import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './Home/home.module'
}
];
export const appRoutingProviders: any[] = [
];
export const routing = RouterModule.forRoot(appRoutes);
主页/主页.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HomeComponent } from './home.component';
import { routing } from './home.routing';
@NgModule({
imports: [
BrowserModule,
routing],
declarations: [
HomeComponent]
})
export class HomeModule { }
主页/主页.routing.ts
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
const homeRoutes: Routes = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent
}
];
export const appRoutingProviders: any[] = [
];
export const routing = RouterModule.forChild(homeRoutes);