如何使用 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

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文