我正在使用Angular和Angular Material构建一个应用程序,但我的模块结构存在一些问题。
根据指南的建议,导入MaterialModule已经被弃用,不应再这样做,因此我制作了一个单独的MaterialModule,在其中仅导入我需要使用的Material模块;然后在SharedModule中导入此模块,最终在所有需要它的地方导入,包括主AppModule。
我正在使用的其中一个Material组件是MdTooltip,一切都正常工作,除了当我在平板电脑上测试应用程序时:发生的情况是工具提示不会像应该的那样对长时间点击做出反应,也不会打开。我设法让它正常工作的唯一方法是在我的AppModule中导入完整的MaterialModule(来自@angular/material),这非常错误和不优雅。任何其他方法似乎都无法解决这个问题,而且还会带来新的问题。
这些是我的模块(去掉了多余的导入语句):
MaterialModule:
import { NgModule } from '@angular/core';
import {...} from '@angular/material';
@NgModule({
imports: [
MdGridListModule,
MdButtonModule,
MdTabsModule,
MdToolbarModule,
MdCardModule,
MdInputModule,
MdSelectModule,
MdAutocompleteModule,
MdIconModule,
MdTooltipModule
],
exports: [
MdGridListModule,
MdButtonModule,
MdTabsModule,
MdToolbarModule,
MdCardModule,
MdInputModule,
MdSelectModule,
MdAutocompleteModule,
MdIconModule,
MdTooltipModule
],
providers: [
MdIconRegistry
]
})
export class MaterialModule {}
共享模块:
import { MaterialModule } from '../material/app-material.module';
@NgModule({
imports: [
CommonModule,
MaterialModule,
FlexLayoutModule,
FormsModule,
ReactiveFormsModule
],
declarations: [
NavbarComponent,
SearchFiltersComponent,
RightCurrencyPipe
],
exports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
MaterialModule,
FlexLayoutModule,
NavbarComponent,
RightCurrencyPipe,
SearchFiltersComponent
],
providers: [
SpinnerService,
ProductsService,
StatePersistenceService
]
})
export class SharedModule {}
应用模块:
import { MaterialModule } from "@angular/material";
@NgModule({
declarations: [
AppComponent,
ProductPageComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule,
BrowserAnimationsModule,
AppRoutingModule,
SharedModule,
CoreModule,
LoginModule,
MaterialModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
我是否做错了什么?你会如何将你的应用程序划分为子模块?
先行感谢。