导出组件的弹性布局

Question

核心模块中是导出的导航组件（app-nav）。核心模块导入app模块

flex-layout模块也被导入到app模块中。

我将选择器 app-nav 添加到 app.component.html。但是在 nav 组件中，它们没有计算出 flex-layout 属性 "fxFlex".

请告诉我，这是什么问题？如何将 Flex-Layout 模块导入到应用模块中并使其对所有子模块可用？

nav.component.html

<a mat-list-item [ngStyle]="{'padding-left': (depth * 12) + 'px'}" (click)="onItemSelected(item)" [ngClass]="{'active': item.route ? router.isActive(item.route, true): false, 'expanded': expanded}"
  class="menu-list-item">
  <i class="{{item.iconName}}"></i>
  {{item.displayName}}
  <span fxFlex *ngIf="item.children && item.children.length">
    <span fxFlex></span>
    <mat-icon [@indicatorRotate]="expanded ? 'expanded': 'collapsed'">
      expand_more
    </mat-icon>
  </span>
</a>
<div *ngIf="expanded">
  <app-nav *ngFor="let child of item.children" [item]="child" [depth]="depth+1"></app-nav>
</div>

core.module.ts

/* other modules and components */
import { NavComponent } from './nav/nav.component';

@NgModule({
  imports: [
    ..,   
  ],
  declarations: [
    ..,
    NavComponent
  ],
  exports: [
    ..,
    NavComponent
  ],
  providers: [
    ..,
  ]
})
export class CoreModule { }

app.module.ts

/* other modules and components */
import { FlexLayoutModule } from '@angular/flex-layout';
import { CoreModule } from './core/core.module';;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FlexLayoutModule,
    CoreModule,
    BotModule,
    DashboardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<mat-nav-list>
    <app-nav *ngFor="let item of navItems" [item]="item"></app-nav>
</mat-nav-list>

Answer 1

它不起作用，因为 FlexLayoutModule 是在 AppModule 中导入的，而不是在 CoreModule 中。在 CoreModule 中声明的组件的范围仅限于 CoreModule，因此它们不能使用未在 CoreModule 中导入的组件或模块。

要完成这项工作：

要么在 CoreModule 中导入 FlexLayoutModule。
在SharedModule中import和export FlexLayoutModule，然后在任何你想使用flex的地方import SharedModule。

导出组件的弹性布局

Flex-layout for the exported component

angular

angular-flex-layout