使用 Angular 中的 Exports 数组公开功能

2020-05-11 08:00:00 · 飞浪

介绍在Angular中，您可以借助功能模块分离功能。这可以帮助您轻松维护应用程序。功能模块还可以帮助您快速跟踪错误。您可以在许多其他模块中使用功能模块，但这些功能模块将无法访问其他模块

介绍

在 Angular 中，您可以借助功能模块分离功能。这可以帮助您轻松维护应用程序。功能模块还可以帮助您快速跟踪错误。您可以在许多其他模块中使用功能模块，但这些功能模块将无法访问其他模块，除非它们被公开。您必须了解如何公开功能，以便可以将它们导入到其他模块中。

Angular 中的预定义功能模块

Angular 附带许多预定义的功能模块。这些模块公开了组件、管道或指令，可帮助您更快地构建应用程序，而无需实现每一个功能。

下面列出了其中几个：

ReactiveForms 模块：此模块导出所需的指令，如formControlName或formGroup，帮助您创建反应式表单。
RouteModule ：此模块导出所需的指令和提供程序，例如routerLink或routerLinkActive，可帮助您创建客户端路由。

创建功能模块

在此功能模块中，您将创建一个使用日期格式的管道。您将以yyyy-mm-dd格式传递日期，它将以dd-mm-yyyy格式返回日期。

使用以下命令创建一个项目。

      $ ng new features-export-demo

使用以下命令创建功能模块。

      $ ng g m date-format

使用以下命令创建管道。

      $ ng g pipe /date-format/date-format

环境已经创建，现在您将编写管道的代码。

日期格式.pipe.ts

      import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "dateFormat",
})
export class DateFormatPipe implements PipeTransform {
  transform(value: any, ...args: any[]): any {
    return value.split("-").reverse().join("-");
  }
}
    

日期格式.模块.ts

      import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { DateFormatPipe } from "./date-format.pipe";

@NgModule({
  declarations: [DateFormatPipe],
  imports: [CommonModule],
  exports: [DateFormatPipe],
})
export class DateFormatModule {}
    

在DateFormatModule中，我们公开了一个DateFormatPipe，以便其他模块可以利用这个管道。

DateFormat管道已准备就绪。要在AppComponent中使用它，您需要在app.module.ts中导入DateFormatModule。

应用程序.模块.ts

      import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { DateFormatModule } from "./date-format/date-format.module";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, DateFormatModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
    

DateFormatModule已借助NgModule的imports数组导入。您可以在AppComponent中使用DateFormatModule的功能。

在app.component.ts中创建一个包含yyyy-mm-dd格式的日期的变量。

应用程序.组件.ts

      import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  testDate: string;

  constructor() {
    this.testDate = "2019-05-06";
  }
}
    

您已定义变量testDate ，格式为yyyy-mm-dd，并在构造函数中赋值。您可以使用插值将testDate的值与 HTML 模板绑定，并使用管道转换日期格式。

应用程序.组件.html

      {{testDate| dateFormat}}

应用程序现已准备就绪。使用以下命令运行该项目。

      $ npm start

检查输出；它会将日期转换为dd-mm-yyyy格式，如下所示。

您已成功在功能模块中创建管道，并使用NgModule的exports数组将其公开。

结论

在本指南中，我们讨论了如何公开功能模块的功能，以便您可以在其他模块中使用它们。我们列出了一些预定义的功能模块，但 Angular 提供了更多功能模块，您可以在此处阅读。在本指南中，我们实现了一个日期格式的简单示例，但我强烈建议您进一步探索并为您的应用程序添加更多功能。

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

_查看原文

技术指南

阅读全文

使用 Angular 中的 Exports 数组公开功能

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import { Pipe, PipeTransform } from "@angular/core"; @Pipe({ name: "dateFormat", }) export class DateFormatPipe implements PipeTransform { transform(value: any, ...args: any[]): any { return value.split("-").reverse().join("-"); } }

import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { DateFormatPipe } from "./date-format.pipe"; @NgModule({ declarations: [DateFormatPipe], imports: [CommonModule], exports: [DateFormatPipe], }) export class DateFormatModule {}

import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { AppRoutingModule } from "./app-routing.module"; import { AppComponent } from "./app.component"; import { DateFormatModule } from "./date-format/date-format.module"; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, AppRoutingModule, DateFormatModule], providers: [], bootstrap: [AppComponent], }) export class AppModule {}

import { Component } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.scss"], }) export class AppComponent { testDate: string; constructor() { this.testDate = "2019-05-06"; } }