Question

核心模块中的

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

flex-layout模块也已导入到应用程序模块中。

我将选择器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中导入和导出FlexLayoutModule，然后在要使用flex的任何位置导入SharedModule。

导出组件的弹性布局

1 个答案: