在延迟加载的模块上下文下无法识别组件@input

问题描述

我实现了一个日期组件：

组件：

import { Component,HostListener,AfterViewInit,OnInit,Output,EventEmitter,Input,ElementRef,forwardRef,ViewChild } from '@angular/core';
import { FormControl,ControlValueAccessor,NG_VALUE_ACCESSOR } from '@angular/forms';

declare var $: any;

@Component({
  selector: 'date',templateUrl: './date.component.html',styleUrls: ['./date.component.scss'],providers: [
  { 
    provide: NG_VALUE_ACCESSOR,multi: true,useExisting: forwardRef(() => DateComponent),}
]
})
export class DateComponent  implements AfterViewInit,ControlValueAccessor {

  public dateConstructionMessage = '';
  public innersize: number = window.innerWidth;
  public showHelpMessage = false;
  public formControlNameDate;
  //The internal data model for form control value access
  private innerValue: any = '';

  @input() nameDate: string;
  @input() patternDate: string;
  @input() maskDate: string;
  //@input() c:FormControl = new FormControl(); 

  @Output() selectCallBack = new EventEmitter<any>();
  @Output() closeCallBack = new EventEmitter<any>();
  @Output() sendLog = new EventEmitter<any>();
  @Output() focusDateField = new EventEmitter<any>();
  @Output() sendFormControlValue = new EventEmitter<any>();

html：

<table>
    <tr>
        <td>
            <input style="width: 100%;" class="form-control" id="datepicker" type="text" (focus)="focusFunction()" placeholder="{{nameDate}}" title="{{nameDate}}" pattern="[0-9]{2}\/[0-9]{2}\/[0-9]{4}" mask="00/00/0000" (keyup)="onKeyUp($event)" #input (blur)="onChange($event,input.value)">
        </td>
        <td style="position : relative">
            <img id="help1" src="./../../assets/images/help.png" alt="Help" (mouSEOver)="showHelpMessage=true" (mouSEOut)="showHelpMessage=false" title="Format de date : dd/mm/aaaa,exemple : 22/03/1980"> 
            <div *ngIf="showHelpMessage" style="position: absolute; top: -54px;left: -140px; width: 230px; background-color: #ECB605;padding: 5px 5px; border-radius: 6px;">
                Format de date : dd/mm/aaaa,exemple : 22/03/1980
            </div>
        </td>
    </tr>
</table>

此日期组件包含在 CoreModule 中：

@NgModule({
  declarations: [
    DateComponent,simpledialogComponent,DragDropDirective,DigitOnlyDirective,MultiplyCharacterPipe
  ],imports: [
    browserModule,MatDialogModule,MatToolbarModule,MatCardModule,MatButtonModule
    ],exports: [DateComponent],schemas: [
    CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA
  ]
})
export class CoreModule { }

这个 coreModule 包含在 AppModule 中。 我使用延迟加载的模块：

const routes: Routes = [
  {
    path: '',redirectTo: '/homePage',pathMatch: 'full'
  },{
    path: 'homePage',component: HomePageComponent
  },{
    path: 'produitImmobilier',loadChildren: () => import('./produit-immobilier/produit-immobilier-routing.module').then(module => module.ProduitImmobilierRoutingModule)
  },

进一步：

const routes: Routes = [
      {
    path: '',redirectTo: 'addProduitImmobilier',{
    path: 'addProduitImmobilier',component: AddProduitImmobilierComponent
  }
];

@NgModule({
  imports: [
    ProduitImmobilierModule,RouterModule.forChild(routes)],exports: [RouterModule]
})
export class ProduitImmobilierRoutingModule { }

ET

@NgModule({
  declarations: [
    AddProduitImmobilierComponent,CropperDialogComponent],ReactiveFormsModule,MatAutocompleteModule,MatFormFieldModule
  ]
})
export class ProduitImmobilierModule { }

当我尝试浏览 localhost:4200/produitImmobilier/addProduitImmobilier 时，出现以下错误

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'nameDate' since it isn't a kNown property of 'date'. ("onKeyUpCallback($event)" (focusDateField)="focusFunction($event)" (blur)="checkValidityFirstTab();" [ERROR ->][nameDate]="'Date de construction'"  c="{{dialogFormGroup.get(['dateConstruction']).value}}" [maskDat"): ng:///ProduitImmobilierModule/AddProduitImmobilierComponent.html@179:264
Can't bind to 'c' since it isn't a kNown property of 'date'. ("eld)="focusFunction($event)" (blur)="checkValidityFirstTab();" [nameDate]="'Date de construction'"  [ERROR ->]c="{{dialogFormGroup.get(['dateConstruction']).value}}" [maskDate]="'00/00/0000'" [patternDate]="'[0-"): ng:///ProduitImmobilierModule/AddProduitImmobilierComponent.html@179:301
Can't bind to 'maskDate' since it isn't a kNown property of 'date'. ("ab();" [nameDate]="'Date de construction'"  c="{{dialogFormGroup.get(['dateConstruction']).value}}" [ERROR ->][maskDate]="'00/00/0000'" [patternDate]="'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'" formControlName="dateConstru"): ng:///ProduitImmobilierModule/AddProduitImmobilierComponent.html@179:357
Can't bind to 'patternDate' since it isn't a kNown property of 'date'. ("e construction'"  c="{{dialogFormGroup.get(['dateConstruction']).value}}" [maskDate]="'00/00/0000'" [ERROR ->][patternDate]="'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'" formControlName="dateConstruction" (sendFormControlVal"): ng:///ProduitImmobilierModule/AddProduitImmobilierComponent.html@179:383
'date' is not a kNown element:
1. If 'date' is an Angular component,then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
                                </td>
                                <td style="width:22.5%">
                                    [ERROR ->]<date (selectCallBack)="onSelectDateConstructionDatePickerCallBack($event)" (closeCallBack)="onCloseD"): ng:///ProduitImmobilierModule/AddProduitImmobilierComponent.html@179:9
Can't bind to 'nameDate' since it isn't a kNown property of 'date'. ("onKeyUpCallback($event)" (focusDateField)="focusFunction($event)" (blur)="checkValidityFirstTab();" [ERROR ->][nameDate]="'Date de construction'"  [maskDate]="'00/00/0000'" [patternDate]="'[0-9]{2}\/[0-9]{2}\/[0"): ng:///ProduitImmobilierModule/AddProduitImmobilierComponent.html@265:270
Can't bind to 'maskDate' since it isn't a kNown property of 'date'. ("eld)="focusFunction($event)" (blur)="checkValidityFirstTab();" [nameDate]="'Date de construction'"  [ERROR ->][maskDate]="'00/00/0000'" [patternDate]="'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'" formControlName="dateConstru"): ng:///ProduitImmobilierModule/AddProduitImmobilierComponent.html@265:307
Can't bind to 'patternDate' since it isn't a kNown property of 'date'. (")" (blur)="checkValidityFirstTab();" [nameDate]="'Date de construction'"  [maskDate]="'00/00/0000'" [ERROR ->][patternDate]="'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'" formControlName="dateConstruction" (sendFormControlVal"): ng:///ProduitImmobilierModule/AddProduitImmobilierComponent.html@265:333
'date' is not a kNown element:
1. If 'date' is an Angular component,then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
                            <tr>
                                <td style="width:40%">
                                    [ERROR ->]<date date1 (selectCallBack)="onSelectDateConstructionDatePickerCallBack($event)" (closeCallBack)="on"): ng:///ProduitImmobilierModule/AddProduitImmobilierComponent.html@265:9

AddProduitImmobilierComponent 的 html 部分如下：

                    <td style="width:22.5%">
                            <date (selectCallBack)="onSelectDateConstructionDatePickerCallBack($event)" (closeCallBack)="onCloseDateConstructionDatePickerCallBack($event)" (sendLog)="onKeyUpCallback($event)" (focusDateField)="focusFunction($event)" (blur)="checkValidityFirstTab();" [nameDate]="'Date de construction'"  c="{{dialogFormGroup.get(['dateConstruction']).value}}" [maskDate]="'00/00/0000'" [patternDate]="'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'" formControlName="dateConstruction" (sendFormControlValue)="updateDateConstructionValue($event)"></date>
                        </td>   

解决方法

我的问题终于解决了

这是应用模块

@NgModule({
  declarations: [
    AppComponent,HomePageComponent,HeaderComponent,],imports: [
    BrowserAnimationsModule,AppRoutingModule,ReactiveFormsModule,HttpClientModule,NgxMaskModule.forRoot(),bootstrap: [AppComponent]
})
export class AppModule {

这里是共享模块

@NgModule({
  declarations: [
    DateComponent,SimpleDialogComponent,DragDropDirective,DigitOnlyDirective,MultiplyCharacterPipe
  ],imports: [
    CommonModule,MatDialogModule,MatInputModule
    ],exports: [
    DateComponent,MultiplyCharacterPipe,CommonModule,MatInputModule
        ],schemas: [
        CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA
      ]
})
export class Shared1Module { }

这里是 AppRouting 模块

const routes: Routes = [
  {
    path: '',redirectTo: '/homePage',pathMatch: 'full'
  },{
    path: 'homePage',component: HomePageComponent
  },{
    path: 'produitImmobilier',loadChildren: () => import('./produit-immobilier/produit-immobilier-routing.module').then(module => module.ProduitImmobilierRoutingModule)
  },{
    path: 'account',loadChildren: () => import('./user-account/user-account-routing.module').then(module => module.UserAccountRoutingModule)
  }
  ];


@NgModule({
  imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }

这是 ProduitImmobilierRoutingModule 模块

const routes: Routes = [
  {
    path: '',redirectTo: 'list',{
    path: 'add',component: AddProduitImmobilierComponent
  },{
    path: 'list',component: ListProduitImmobilierComponent
  },{
    path: 'details/:id',component: ProduitImmobilierDetailsComponent
  },{ path: '**',component: ListProduitImmobilierComponent }  
];

@NgModule({
  imports: [
    ProduitImmobilierModule,RouterModule.forChild(routes)],exports: [RouterModule]
})
export class ProduitImmobilierRoutingModule { }

这是 ProduitImmobilierModule

@NgModule({
  declarations: [
    AddProduitImmobilierComponent,CropperDialogComponent,ListProduitImmobilierComponent,ProductLightComponent,ProduitImmobilierDetailsComponent,UserCardComponent],imports: [
    Shared1Module,MatAutocompleteModule,MatFormFieldModule,ImageCropperModule,MDBBootstrapModule.forRoot(),AgmCoreModule.forRoot({
      apiKey: 'AIzaSyA3nptWFYQVNZFsBws0egtBoEzbv-Qye_Q'
    })
  ],entryComponents: [CropperDialogComponent]
})
export class ProduitImmobilierModule { }