angular装饰器

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_30527143

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量77

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jsersudo/p/11023773.html

本文深入探讨了Angular框架中NgModule和@Component装饰器的功能与使用。NgModule用于组织和配置模块，包括声明、导出、导入和提供服务等关键概念。而@Component则详细介绍了如何通过selector、templateUrl和providers选项创建和配置组件。

@NgModule 元数据

NgModule 是一个带有 @NgModule() 装饰器的类。@NgModule() 装饰器是一个函数，它接受一个元数据对象，该对象的属性用来描述这个模块。其中最重要的属性如下。

declarations（可声明对象表） —— 那些属于本 NgModule 的组件、指令、管道。
exports（导出表） —— 那些能在其它模块的组件模板中使用的可声明对象的子集。
imports（导入表） —— 那些导出了本模块中的组件模板所需的类的其它模块。
providers —— 本模块向全局服务中贡献的那些服务的创建器。这些服务能被本应用中的任何部分使用。（你也可以在组件级别指定服务提供商，这通常是首选方式。）
bootstrap —— 应用的主视图，称为根组件。它是应用中所有其它视图的宿主。只有根模块才应该设置这个 bootstrap属性。

@Component 配置选项：

selector：是一个 CSS 选择器，它会告诉 Angular，一旦在模板 HTML 中找到了这个选择器对应的标签，就创建并插入该组件的一个实例。比如，如果应用的 HTML 中包含 <app-hero-list></app-hero-list>，Angular 就会在这些标签中插入一个 HeroListComponent 实例的视图。
templateUrl：该组件的 HTML 模板文件相对于这个组件文件的地址。另外，你还可以用 template 属性的值来提供内联的 HTML 模板。这个模板定义了该组件的宿主视图。
providers：当前组件所需的服务提供商的一个数组。在这个例子中，它告诉 Angular 该如何提供一个 HeroService 实例，以获取要显示的英雄列表。

转载于:https://www.cnblogs.com/jsersudo/p/11023773.html