javascript - 无法在我的功能模块中导入 Angular flex-layout
问题描述
我正在尝试在我的一个模块中使用 Angular flex-layout,但我无法使其工作。当我在应用程序模块中导入 flex-layout 时,它工作得很好,但只在应用程序组件中。当我在另一个模块中导入 flex-layout 时,它根本不起作用。我没有收到任何错误,它只是不起作用。
我的代码:
// App module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FlexLayoutModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
.
// AppComponent HTML - WORKS
<div fxLayout="row" fxLayoutAlign="center center">
<div fxFlex="30%">
example
</div>
</div>
.
// Other module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { SomeRoutingModule } from './some-routing.module';
import { SomeComponent } from './pages/some-component/some-component.component';
@NgModule({
declarations: [SomeComponent],
imports: [
CommonModule,
FlexLayoutModule,
SomeRoutingModule
]
})
export class GameModule { }
.
// SomeComponent HTML - DOESN'T WORK
<div fxLayout="row" fxLayoutAlign="center center">
<div fxFlex="30%">
example
</div>
</div>
解决方案
尝试在 Imports 下的 AppModule 中导入 GameModule。
但是,我建议你创建一个共享模块并将 flex-layout 放在那里,因为最新的 Angular 版本支持共享模块并且被认为是最佳实践。有关如何创建共享模块的更多说明如下: https ://angular.io/guide/styleguide#shared-feature-module
推荐阅读
- javascript - 在数据表分页单击时停止事件执行
- android - 在锁定的 Android 上没有来自 AccessibilityService 的回调
- javascript - 在使用 redux 表单包裹且具有相同标识符的子表单之间切换也会破坏父表单值
- pdf - 如何以编程方式将 RMarkdown ioslides 演示文稿转换为 2-up PDF?
- reactjs - app.delete 中的 req.params 为空,使用 express、axios、react
- c# - 如何使用c#执行vsjitdebugger.exe
- flexbox - bootstrap 的 flex-column 填充全宽,如何不拉伸到全宽?
- javascript - 数组帮助 | JS
- solr - 在 Solr 7.x 中,如何仅对逗号而不是空格或其他特殊字符进行标记?
- javascript - Javascript绑定函数未按预期传递参数