Angular2核心组件@Component
2017-10-28 15:14
357 查看
功能:
利用Angular的component创建一个class,并且在这个component中集中配置元数据(metadata);
如何使用?
2
3
4
5
6
7
8
9
10
概述
Component修饰符可以让开发者通过Angular 的Component创建一个类似Java的class,并同时提供额外的元数据用于定义在运行环境中,这个component将如何运行/实例化以及被使用。
在Angular2应用中组件是UI最基础的建筑砖块,一个Angular2应用就是一个Angular Components Tree。Angular components它实际上是directives下的一个子集,但是和directive不同的是,Component始终存在一个视图模板,在这个视图模板中,每一个元素只能有一个component被实例化。
任何一个Component都是NgModule的一部分,这样它就可以被其他应用和其他Component所调用。为了定义Component是
另外,通过Component修饰符(也就是@Component)开发者可以配置元数据,这样通过各式各样的Life-Cycle hooks,Components就可以控制他们的运行环境。
元数据属性:
animations - 规定这个component的动画列表
changeDetection - 通过这个component变更侦测策略;
encapsulation - 通过该component设计封装策略;
entryComponents - 一个components的列表,这个列表会动态插入进当前component的视图中。
exportAs -名下component的实例化被导出在一个模板视图中。
host - class属性映射到host元素上,并绑定了事件,属性;
inputs - 当前class属性名列表,当前components输入的数据绑定。
interpolation - 自定义改写工具,被用于当前component的视图模板上。
moduleld - 文件中ES/CommonJS 模块的id,而当前component就定义在该模块中。
outputs - 当前class属性名列表,对外暴露输出事件,这样其他components就可以调用。
providers - providers列表,该列表可以用于当前component和其子component.
queries - 将配置问题注入到当前component中。
selector - 样式选择器,它可以在一个复杂的视图模板中识别出当前component.
styleUrls - 运用在当前component中的一组样式表的url列表
styles - 样式
template - 视图模板
viewProvider - providers列表,该列表可以用于当前component,以及其子视图。
templateUrl - 视图模板的url链接
利用Angular的component创建一个class,并且在这个component中集中配置元数据(metadata);
如何使用?
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app works!'; }1
2
3
4
5
6
7
8
9
10
概述
Component修饰符可以让开发者通过Angular 的Component创建一个类似Java的class,并同时提供额外的元数据用于定义在运行环境中,这个component将如何运行/实例化以及被使用。
在Angular2应用中组件是UI最基础的建筑砖块,一个Angular2应用就是一个Angular Components Tree。Angular components它实际上是directives下的一个子集,但是和directive不同的是,Component始终存在一个视图模板,在这个视图模板中,每一个元素只能有一个component被实例化。
任何一个Component都是NgModule的一部分,这样它就可以被其他应用和其他Component所调用。为了定义Component是
NgModule的一个成员之一,开发者应该在
NgModule的
declarations属性中,将自己开发的Component列出。
另外,通过Component修饰符(也就是@Component)开发者可以配置元数据,这样通过各式各样的Life-Cycle hooks,Components就可以控制他们的运行环境。
元数据属性:
animations - 规定这个component的动画列表
changeDetection - 通过这个component变更侦测策略;
encapsulation - 通过该component设计封装策略;
entryComponents - 一个components的列表,这个列表会动态插入进当前component的视图中。
exportAs -名下component的实例化被导出在一个模板视图中。
host - class属性映射到host元素上,并绑定了事件,属性;
inputs - 当前class属性名列表,当前components输入的数据绑定。
interpolation - 自定义改写工具,被用于当前component的视图模板上。
moduleld - 文件中ES/CommonJS 模块的id,而当前component就定义在该模块中。
outputs - 当前class属性名列表,对外暴露输出事件,这样其他components就可以调用。
providers - providers列表,该列表可以用于当前component和其子component.
queries - 将配置问题注入到当前component中。
selector - 样式选择器,它可以在一个复杂的视图模板中识别出当前component.
styleUrls - 运用在当前component中的一组样式表的url列表
styles - 样式
template - 视图模板
viewProvider - providers列表,该列表可以用于当前component,以及其子视图。
templateUrl - 视图模板的url链接
相关文章推荐
- Angular2核心组件@Component
- Angular2核心组件@Component
- angularjs directive and component 指令与组件 ( 1.5.0 以后 )
- Android核心技术之(3)上---系统组件component
- 组件(Component)映射
- Hibernate-框架核心组件-2
- Read Web Component Architecture & Development with AngularJS.pdf(AngularJS 开发Web结构页面电子书下载)
- angular2封装组件(一)——引用js包
- angular2+中数据变更子组件页面未更新
- vue19 组建 Vue.extend component、组件模版、动态组件
- mybatis的核心组件
- ASP.NET CORE 自定义视图组件(ViewComponent)注意事项
- netty的相关概念和核心组件
- 如何在组件(Component中)模拟用户控件(UserControl)中FindForm()?
- Angular 2 中的组件(二)
- 前端学习总结(七)Angular.js——以数据交互为核心的前端框架
- Angular入口组件(entry component)与声明式组件的区别详解
- 【Unity插件】NGUI核心组件之UIAnchor
- tomcat核心组件及server.xml配置讲解
- react 创建组件 (四)Stateless Functional Component