如果在功能模块中使用，则JW角分页不起作用

如何解决如果在功能模块中使用，则JW角分页不起作用

我使用的是Angular 10，如果将JW Angular Pagination模块导入到app.module.ts中，然后在使用app.component.ts组件的视图中使用它，它将正常工作。但是，当我尝试将其导入自定义功能模块并使用导入功能模块的组件时，分页元素不会显示在视图模板中。看来Angular看不到分页模块。

App.module.ts

import { NgModule,Component,OnInit } from '@angular/core';
import { CoreModule } from "./core/core.module"
import { MessageModule } from "./messages/message.module";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import * as $ from 'jquery';
import { browserModule } from '@angular/platform-browser';
import { AuthService } from "./model/auth.service"
import { JwPaginationModule } from 'jw-angular-pagination';






@NgModule({
  imports: [AppRoutingModule,MessageModule,CoreModule,browserModule,JwPaginationModule],declarations: [AppComponent,],providers: [AuthService],bootstrap: [AppComponent]
})
export class AppModule {
}

Core.module.ts

import { NgModule } from "@angular/core";
import { ModelModule } from "../model/model.module";
import { FormsFeatureModule } from "../view/forms.module";
import { ViewFeatureModule } from "../view/view.module";
import { routing } from "../app.routing";
import { MessageModule } from "../messages/message.module";
import { MessageService } from "../messages/message.service";
import { Message } from "../messages/message.model";
import { AuthService } from "../model/auth.service";
import { EncrDecrService } from '../utils/EncrDecr.service';
import { CommonModule } from '@angular/common';



//import { NotFoundComponent } from "./notFound.component";
//import { UnsavedGuard } from './unsaved.guard';


@NgModule({
  imports: [ModelModule,routing,FormsFeatureModule,ViewFeatureModule,CommonModule],declarations: [],exports: [ModelModule,MessageModule ],providers: [AuthService,EncrDecrService],})


export class CoreModule {
  
}

Forms.module.ts

import { NgModule } from "@angular/core";
import { FormsModule,Validators,FormGroup,FormBuilder,NgForm } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { browserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
//import { NotFoundComponent } from "./notFound.component";
//import { UnsavedGuard } from './unsaved.guard';
import { ActivatedRoute,Router } from "@angular/router";
import { AuthService } from "../model/auth.service";
import { JwPaginationModule } from 'jw-angular-pagination';


@NgModule({
  imports: [FormsModule,ReactiveFormsModule,RouterModule,exports: [FormsModule,})


export class FormsFeatureModule {

  constructor(private router: Router) { }

View.module.ts

import { RecipeViewComponent } from "../view/recipeView.component";
import { NgModule } from "@angular/core";
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { browserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { HomePageComponent } from "./homePage.component";
import { AdminComponent } from "../admin/admin.component";
import { AuthService } from "../model/auth.service";
//import { NotFoundComponent } from "./notFound.component";
//import { UnsavedGuard } from './unsaved.guard';


@NgModule({
  imports: [FormsModule,RouterModule],declarations: [RecipeViewComponent,HomePageComponent,AdminComponent],exports: [RecipeViewComponent,AdminComponent,})


export class ViewFeatureModule { }

admin.component.ts

import { Component,Inject,DoCheck,ChangeDetectorRef,OnInit } from "@angular/core";
import { ActivatedRoute,Router } from "@angular/router";
import { ModelRepo } from "../model/repository.model";
import { Category } from "../model/category.model";
import { Ingredient } from "../model/ingredient.model";
import { RecipeBook } from "../model/recipeBook.model";
import { User } from "../model/user.model";
import { FormsFeatureModule } from "../view/forms.module"
import { ViewChild,ElementRef } from '@angular/core';
import { EncrDecrService } from '../utils/EncrDecr.service';
import { AppComponent } from '../app.component'
import { Observable,throwError } from "rxjs";


//import { MODES,SharedState,SHARED_STATE } from "./sharedState.model";
//import { Observer} from "rxjs"


@Component(



  {
    selector: "admin",templateUrl: "admin.component.html"
  }

)


export class AdminComponent implements OnInit {
 ModNewCategory = new Category(0,"");
  ModNewIngredient = new Ingredient(0,"");
  ModNewRecipeBook = new RecipeBook();
  selectedConfig = "categories"; //initilze for first page load
  selectedCategoryOperation = "addCategory"; //initilze for first page load
  selectedIngredientOperation = "addIngredient"; //initilze for first page load
  selectedUserOperation = "addUser"; //initilze for first page load
  userRoles = new Array<string>("visitor","member","administrator");
  searchRole = "";
  id;
  mode;
  operation;
  defaultObject = new Object();
  public pageOfItems: Array<any>;
  public items = [];

  constructor(public dataRepo: ModelRepo,private EncrDecr: EncrDecrService,private appComponent:AppComponent,activeRoute: ActivatedRoute,public router: Router,public fieldValidator: FormsFeatureModule) {
    
    activeRoute.params.subscribe(params => {

      this.id = params["id"];
      this.mode = params["mode"];
      this.operation = params["operation"]
      if (this.operation != null && this.mode != null) {
        this.modifyItem(this.id,this.operation);
      }
     
    }
   
    )
  }
  ngOnInit() {
    // an example array of 150 items to be paged
  //  this.items = this.dataRepo.users;
    this.items = Array(150).fill(0).map((x,i) => ({ id: (i + 1),name: `Item ${i + 1}` }));
   
  }

  onChangePage(pageOfItems: Array<any>) {
    // update current page of items
    alert('onChangePage got called');
    this.pageOfItems = pageOfItems;
  }

admin.component.html

   <div class="card text-center m-3">
      <h3 class="card-header">Angular  Pagination Example</h3>
      <div class="card-body">
        <div *ngFor="let item of pageOfItems">{{item.name}}</div>
      </div>
      <div class="card-footer pb-0 pt-3">
        <jw-pagination [items]="items" (changePage)="onChangePage($event)"></jw-pagination>
      </div>
    </div>

解决方法

问题

您正在使用Angular10 ...

看看下面的语句Ivy is not complaining about unknown element inside ng-template #36171

这是由于常春藤的体系结构更改。在以前的编译器（ViewEngine）中，对未知元素的检查将在模板解析期间进行。在Ivy中，模板是独立于相应的NgModule进行解析的，因此不提供有关范围内组件/指令的信息。

相反，元素检查被推入模板类型检查阶段，并且当前受类型检查器的配置影响。但是，将fullTemplateTypeCheck设置为true时，它应该进入模板进行检查（如果为假，则不会出于向后兼容的原因）。但是，这与您在此处的声明冲突：

只能在运行时（没有呈现任何组件）或使用fullTemplateTypeCheck: true才能发现该问题。

考虑要声明的模块AdminComponent中的imports数组

imports: [FormsModule,ReactiveFormsModule,BrowserModule,RouterModule],

该模块对JwPaginationModule

不了解

解决方案

最简单的解决方案是将JwPaginationModule添加到该数组中

imports: [FormsModule,RouterModule,JwPaginationModule],

现在，模块将了解此组件并正确渲染。