Flex-макет для экспортируемого компонента - PullRequest
Новая
       6

Flex-макет для экспортируемого компонента

0 голосов
/ 12 февраля 2019

в основном модуле - это экспортированный компонент nav (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>

1 Ответ

0 голосов
/ 12 февраля 2019

Это не работает, потому что FlexLayoutModule импортируется в AppModule, а не в CoreModule.Компоненты, объявленные в CoreModule, имеют область действия, ограниченную только CoreModule, и поэтому они не могут использовать компоненты или модули, не импортированные в CoreModule.

Для того, чтобы это работало:

  1. Либо импортируйте FlexLayoutModule в CoreModule.
  2. импортируйте и экспортируйте FlexLayoutModule в SharedModule, а затем импортируйте SharedModule везде, где вы хотите использовать flex.
...