node.js - 如果在功能模块中使用 JW Angular 分页将不起作用
问题描述
我正在使用 Angular 10,如果我将 JW Angular Pagination 模块导入到 app.module.ts 中,然后在使用 app.component.ts 组件的视图中使用它,则它可以正常工作。但是,当我尝试将其导入自定义功能模块并使用导入功能模块的组件时,分页元素不会显示在视图模板中。Angular 似乎看不到分页模块。
应用模块.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 {
}
核心模块.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, MessageModule, routing, FormsFeatureModule, ViewFeatureModule, CommonModule],
declarations: [],
exports: [ModelModule, FormsFeatureModule, ViewFeatureModule, 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, BrowserModule, RouterModule, JwPaginationModule],
declarations: [],
exports: [FormsModule, ReactiveFormsModule, RouterModule, JwPaginationModule],
providers: [AuthService],
})
export class FormsFeatureModule {
constructor(private router: Router) { }
查看.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, ReactiveFormsModule, BrowserModule, RouterModule],
declarations: [RecipeViewComponent, HomePageComponent, AdminComponent],
exports: [RecipeViewComponent, HomePageComponent,AdminComponent, RouterModule],
providers: [AuthService],
})
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 没有抱怨 ng-template 中的未知元素 #36171
这是由于 Ivy 的架构变化。在之前的编译器(ViewEngine)中,对未知元素的检查会在模板的解析过程中发生。在 Ivy 中,模板是独立于相应的 解析的
NgModule
,因此有关范围内的组件/指令的信息不可用。
相反,元素检查被推入模板类型检查阶段,并且它当前受到类型检查器配置的影响。fullTemplateTypeCheck
但是,如果设置为,它应该下降到模板中进行检查(当true
它为假时,它不会出于向后兼容性的原因)。但是,这与您在此处的陈述相冲突:
该问题只能在运行时(未呈现组件)或使用fullTemplateTypeCheck: true
.
考虑您要声明的模块中的导入数组AdminComponent
imports: [FormsModule, ReactiveFormsModule, BrowserModule, RouterModule],
这个模块没有任何想法JwPaginationModule
解决方案
最简单的解决方案是简单地添加JwPaginationModule
到这个数组
imports: [FormsModule, ReactiveFormsModule, BrowserModule, RouterModule, JwPaginationModule],
现在模块将知道这个组件并正确呈现。
推荐阅读
- c# - 如何在 ASP.NET Core WebAssembly .NET 5 中覆盖 Blazor Identity Server 4 中的 LoginDisplay?
- markdown - 在 Markdown 中用不同的对齐方式写一行
- r - 如何纠正无法生成 ggplot2 图表的错误?
- npm - NPM 发布步骤 AzureDevOps 中的构建错误:[object Object] 不是 PostCSS 插件
- dolphindb - 如何获取 DolphinDB 中分布式表的磁盘使用情况?
- javascript - 为什么我不能从另一个方法访问我在 main 方法中创建的 int 数组值?(初级 Java 编码器)
- maven - Apache Archiva 失败/损坏:错误 org.apache.jackrabbit.core.ItemManager [] - 未能检索项目的项目状态
- javascript - Javascript选择同一类的多个图像
- deployment - Bitrise 构建失败“无法提交编辑,错误:googleapi:得到 HTTP 响应代码 502,正文:”
- python - 为什么我的 HTTP Post 在烧瓶中不起作用?