如何使用 Angular 中的导入数组引入外部导出功能
介绍
在本指南中，您将学习如何将功能模块导入项目，以便您可以将功能彼此分开并根据需要使用它们。模块是管道、指令和组件的组合。您可以导入模块来帮助您制作应用程序。将应用程序分成不同的部分并根据时间线组织代码总是好的，这可以帮助您快速获取有关每个模块的相关信息。功能模块可帮助您最大限度地减少错误并提高工作效率。
Angular 中的预定义功能模块
Angular 附带一些默认功能模块，可帮助您专注于功能，而不是从头开始实现。这些模块满足您的基本要求。它们包括：
**CommonModule**：导出基本指令，如NgIf，NgForOf等。
FormsModule：导出模板驱动表单的提供程序和指令，例如 MinLengthValidator 或 MaxLengthValidator。
创建自己的功能模块
在本节中，您将创建一个自定义功能模块。在此功能模块中，您将实现分页功能。如前所述，功能模块可以导出组件、指令和管道。在此功能中，您将导出一个组件。
您将在分页的帮助下显示一个值列表，这样用户就不必滚动太多，只需单击页码即可获取下一个项目。
首先创建一个项目。查看以下代码片段。
$ ng new imports-array-demo
创建一个功能模块。
$ ng g m pagination
在功能模块内创建一个组件，以便您可以导出它。
$ ng g c pagination/components/pager
项目已设立。
现在，在pager.component.ts中进行更改。
分页器.组件.ts
import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
import { Subject } from "rxjs";
@Component({
selector: "app-pager",
templateUrl: "./pager.component.html",
styleUrls: ["./pager.component.scss"]
})
export class PagerComponent implements OnInit {
@Input() pageSize: number;
@Input() totalRecords: number;
@Output() pageNumber = new EventEmitter<any>();
firstPageNumber: number;
lastPageNumber: number;
currentPageNumber: number;
numbers: number[];
constructor() {
this.firstPageNumber = 1;
this.currentPageNumber = 1;
this.numbers = [];
}
ngOnInit() {}
ngOnChanges() {
this.onGenerateNumbers();
}
onGenerateNumbers() {
this.lastPageNumber = Math.ceil(this.totalRecords / this.pageSize);
for (let i = 1; i <= this.lastPageNumber; i++) {
this.numbers.push(i);
}
}
onNumberClick(number) {
this.pageNumber.emit(number);
}
}
这里您从父组件接受pageSize和totalRecords。这两个要求有助于生成页码。在onGenerateNumbers()函数中，生成的数字存储在数组中。
接下来，当用户点击数字时发出事件。
在 HTML 模板中，显示您在onGenerateNumbers()函数中创建的数字。
分页器.组件.html
<div style="text-align: center">
<button *ngFor="let number of numbers" (click)="onNumberClick(number)">
{{number}}
</button>
</div>
每个数字按钮都绑定了一个点击函数，该函数将调用onNumberClick()函数。此函数将发出用户点击的数字。
要在AppComponent中使用此组件，请从功能模块中导出它。
分页.模块.ts
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { PagerComponent } from "./components/pager/pager.component";
@NgModule({
declarations: [PagerComponent],
imports: [CommonModule],
exports: [PagerComponent]
})
export class PaginationModule {}
现在您可以将其导入到您想要使用分页器组件的任何其他模块中。
现在，将其导入AppModule。
应用程序.模块.ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { HttpClientModule } from "@angular/common/http";
import { PaginationModule } from "./pagination/pagination.module";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, PaginationModule, HttpClientModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
在这里您可以看到，在模块的导入数组中，您已经导入了功能模块PaginationModule。
现在你将要使用分页组件。你需要首先获取数据以满足分页组件的要求。
应用程序.组件.ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent {
posts: any;
currentPagenumber: number;
pageSize: number;
totalRecords: number;
paginatedPosts: any;
constructor(private _httpClient: HttpClient) {}
ngOnInit() {
this.currentPagenumber = 1;
this.pageSize = 12;
this.getData();
}
getData() {
let URL = "https://jsonplaceholder.typicode.com/posts";
this._httpClient.get(URL).subscribe(posts => {
this.posts = posts;
this.totalRecords = this.posts.length;
this.paginatedPosts = this.pagination(
this.posts,
this.currentPagenumber,
this.pageSize
);
});
}
onGetPageNumber(number) {
this.currentPagenumber = number;
this.paginatedPosts = this.pagination(
this.posts,
this.currentPagenumber,
this.pageSize
);
}
pagination(items, pageNumber, pageSize) {
let startIndex = (pageNumber - 1) * pageSize;
let endIndex = startIndex + pageSize;
return items.slice(startIndex, endIndex);
}
}
在AppComponent中，创建一个 ajax 请求并获取帖子数据。将帖子的长度存储在totalRecords中。您需要一个页面大小来决定页面中的项目。在构造函数中，将页面大小设置为 12。
onGetPageNumber ()函数接受来自寻呼机组件的页码。它将充当currentPageNumber的角色。
您编写了一个小函数pagination() ，它将根据currentPageNumber返回posts数组中的项目。
接下来，在app.component.html中编写一个分页器组件。
应用程序.组件.html
<div style=" display: flex; flex-wrap: wrap;justify-content: center">
<div
*ngFor="let post of paginatedPosts"
style="width: calc(90% / 3);box-sizing: border-box;padding: 10px;box-shadow: 0 0 2px 0px; margin: 10px;"
>
<div>
<span><b>Id:</b>{{post.id}}</span>
<p><b>Title:</b>{{post.title}}</p>
<p><b>Body:</b>{{post.title}}</p>
</div>
</div>
</div>
<app-pager
[pageSize]="pageSize"
[totalRecords]="totalRecords"
(pageNumber)="onGetPageNumber($event)"
></app-pager>
现在，运行项目并检查结果。
在输出中，您可以看到您的数据已在浏览器中成功呈现，并且分页器组件正常工作。
赞！您已成功创建功能模块并导出组件，然后使用imports数组将其导入AppModule。
结论
在本指南中，我们了解了功能模块以及如何使用imports数组导入它们。Angular 有许多预定义的功能模块，它们将帮助您解决问题并在更短的时间内完成您的应用程序。您可以在此处<font style="vertical-align: i
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~