在 Angular 2 (RC5) 中使用多个自定义模块
Utilizing Multiple Custom Modules in Angular 2 (RC5)
我已将一个不断增长的 ng2 应用程序升级到 RC5,并将我所有的 components/pipes 放入一个胖主模块中。为了对抗膨胀,我试图将我的应用程序分割成单独的模块(也着眼于最终进行延迟加载)。
这是我创建的一个包含一些通用组件的子模块:
我的-shared.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { provideForms, disableDeprecatedForms } from"@angular/forms";
import { TabBarWidgetComponent } from "./tabBarWidget/tabbar-widget.component";
import { MyDatepickerComponent } from "./mykDatePicker/my-datepicker.component";
import { CalendarSelectorComponent } from "./calendarSelector/calendar-selector.component";
import { AccordionTabComponent } from "./accordionTab/accordion-tab.component";
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
TabBarWidgetComponent,
MyDatepickerComponent,
CalendarSelectorComponent,
AccordionTabComponent
],
providers: [
provideForms(),
disableDeprecatedForms()
]
})
export class MySharedModule { }
到目前为止一切顺利。现在我想在主 app.module.ts 中引用这个 MySharedModule,我正在做这样的事情:
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { MySharedModule } from "./shared/my-shared.module";
import { Some1Component } from "./folder/some1.component";
import { Some2Component } from "./folder/some2.component";
import { Some3Component } from "./folder/some3.component";
import { Some4Component } from "./folder/some4.component";
import { Some5Component } from "./folder/some5.component";
import "rxjs/add/operator/map";
import "rxjs/add/operator/toPromise";
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
MySharedModule
],
declarations: [
AppComponent,
Some1Component,
Some2Component,
Some3Component,
Some4Component,
Some5Component,
],
providers: [],
bootstrap: [AppComponent],
entryComponents: []
})
export class AppModule { }
问题是我收到以下错误(这表明子模块组件未被 app.module.ts 中定义的应用程序识别):
Can't bind to 'tabs' since it isn't a known property of 'tab-bar'.
1. If 'tab-bar' is an Angular component and it has 'tabs' input, then verify that it is part of this module.
2. If 'tab-bar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
谁能看出我做错了什么?
尝试更改组件的顺序检查此 link 了解更多详细信息
consider if you had five components in your program, A B C D E. If for
example component A used component B in its template, and component B
used component C in its template, and so on, then the dependencies
between these components are A->B, B->C, C->D, D->E, E->F. In this
case the correct order to list them in the declarations would be
declarations: [E, D, C, B, A].
尝试在共享模块中添加 exports
部分。
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { provideForms, disableDeprecatedForms } from"@angular/forms";
import { TabBarWidgetComponent } from "./tabBarWidget/tabbar-widget.component";
import { MyDatepickerComponent } from "./mykDatePicker/my-datepicker.component";
import { CalendarSelectorComponent } from "./calendarSelector/calendar-selector.component";
import { AccordionTabComponent } from "./accordionTab/accordion-tab.component";
@NgModule({
imports: [
BrowserModule,
FormsModule
],
exports: [
TabBarWidgetComponent,
MyDatepickerComponent,
CalendarSelectorComponent,
AccordionTabComponent
],
declarations: [
TabBarWidgetComponent,
MyDatepickerComponent,
CalendarSelectorComponent,
AccordionTabComponent
],
providers: [
provideForms(),
disableDeprecatedForms()
]
})
export class MySharedModule { }
我已将一个不断增长的 ng2 应用程序升级到 RC5,并将我所有的 components/pipes 放入一个胖主模块中。为了对抗膨胀,我试图将我的应用程序分割成单独的模块(也着眼于最终进行延迟加载)。
这是我创建的一个包含一些通用组件的子模块:
我的-shared.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { provideForms, disableDeprecatedForms } from"@angular/forms";
import { TabBarWidgetComponent } from "./tabBarWidget/tabbar-widget.component";
import { MyDatepickerComponent } from "./mykDatePicker/my-datepicker.component";
import { CalendarSelectorComponent } from "./calendarSelector/calendar-selector.component";
import { AccordionTabComponent } from "./accordionTab/accordion-tab.component";
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
TabBarWidgetComponent,
MyDatepickerComponent,
CalendarSelectorComponent,
AccordionTabComponent
],
providers: [
provideForms(),
disableDeprecatedForms()
]
})
export class MySharedModule { }
到目前为止一切顺利。现在我想在主 app.module.ts 中引用这个 MySharedModule,我正在做这样的事情:
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { MySharedModule } from "./shared/my-shared.module";
import { Some1Component } from "./folder/some1.component";
import { Some2Component } from "./folder/some2.component";
import { Some3Component } from "./folder/some3.component";
import { Some4Component } from "./folder/some4.component";
import { Some5Component } from "./folder/some5.component";
import "rxjs/add/operator/map";
import "rxjs/add/operator/toPromise";
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
MySharedModule
],
declarations: [
AppComponent,
Some1Component,
Some2Component,
Some3Component,
Some4Component,
Some5Component,
],
providers: [],
bootstrap: [AppComponent],
entryComponents: []
})
export class AppModule { }
问题是我收到以下错误(这表明子模块组件未被 app.module.ts 中定义的应用程序识别):
Can't bind to 'tabs' since it isn't a known property of 'tab-bar'. 1. If 'tab-bar' is an Angular component and it has 'tabs' input, then verify that it is part of this module. 2. If 'tab-bar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
谁能看出我做错了什么?
尝试更改组件的顺序检查此 link 了解更多详细信息
consider if you had five components in your program, A B C D E. If for example component A used component B in its template, and component B used component C in its template, and so on, then the dependencies between these components are A->B, B->C, C->D, D->E, E->F. In this case the correct order to list them in the declarations would be declarations: [E, D, C, B, A].
尝试在共享模块中添加 exports
部分。
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { provideForms, disableDeprecatedForms } from"@angular/forms";
import { TabBarWidgetComponent } from "./tabBarWidget/tabbar-widget.component";
import { MyDatepickerComponent } from "./mykDatePicker/my-datepicker.component";
import { CalendarSelectorComponent } from "./calendarSelector/calendar-selector.component";
import { AccordionTabComponent } from "./accordionTab/accordion-tab.component";
@NgModule({
imports: [
BrowserModule,
FormsModule
],
exports: [
TabBarWidgetComponent,
MyDatepickerComponent,
CalendarSelectorComponent,
AccordionTabComponent
],
declarations: [
TabBarWidgetComponent,
MyDatepickerComponent,
CalendarSelectorComponent,
AccordionTabComponent
],
providers: [
provideForms(),
disableDeprecatedForms()
]
})
export class MySharedModule { }