材质角日期选择器渲染问题

时间:2018-06-28 14:31:13

标签: angular angular-material lazy-loading

我正在尝试在应用程序中使用角材料datepicker

对于某些背景,我正在使用延迟加载。 这是日期选择器的实际外观:

datepicker rendering issue

3个有效的输入来自@ng-select/ng-select,我想它会导入自己的模块,以便正确完成渲染?

我认为问题出在BrowserAnimationsModule上,它只能导入到AppModule中,因此无法从我的延迟加载模块中访问它。而且,如果我从延迟加载的数据库中导入该文件,则会出错,因为BrowserAnimationsModule无法导入两次。

另一方面,我尝试直接在app.component.html上实现一个日期选择器,即使加载了BrowserAnimationsModule也有相同的结果,所以我不确定在哪里查看...

这是主文件的代码:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { FooterComponent } from './layout/footer/footer.component';
import { FormsModule } from '@angular/forms';
import { NgSelectModule } from '@ng-select/ng-select';


@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule
  ]
})
export class CoreModule {}


@NgModule({
  declarations: [
      AppComponent, FooterComponent
  ],
  imports: [
    CommonModule,
    HttpClientModule,
    MDBBootstrapModule.forRoot(),
    AngularFontAwesomeModule,
    AppRoutingModule,
    NgSelectModule,
    FormsModule,
    CoreModule
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

lazy-loaded.module.ts

import { CommonModule } from '@angular/common';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { NgSelectModule, NG_SELECT_DEFAULT_CONFIG } from '@ng-select/ng-select';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { LazyLoadingRoutingModule } from './planning-routing.module';

import { LazyLoadedComponent } from './header/header.component';
import { ModalCreatePlanningComponent } from './planning-general/modal-create-planning/modal-create-planning.component';
import { MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatNativeDateModule } from '@angular/material';

@NgModule({
  declarations: [
    PlanningComponent,
    LeftPanelComponent,
    RightPanelComponent,
    PurgerPlanningComponent,
    HeaderComponent,
    ModalCreatePlanningComponent
  ],
  imports: [
    CommonModule,
    MDBBootstrapModule,
    NgSelectModule,
    FormsModule,
    ReactiveFormsModule,
    AngularFontAwesomeModule,
    PlanningRoutingModule,
    MenuModule,
    MatButtonModule,
    MatCheckboxModule,
    MatDatepickerModule,
    MatNativeDateModule,
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [
    {
        provide: NG_SELECT_DEFAULT_CONFIG,
        useValue: {
            notFoundText: 'Aucun stagiaire trouvé'
        }
    }
  ]
})
export class PlanningModule { }

我们对此问题的任何投入表示赞赏,也许与它无关,我完全错了。仍然没有找到有关互联网上不良渲染的任何信息,并且我查看了BrowserAnimationsModules问题,但没有成功。

0 个答案:

没有答案