文档章节

Angular2 @Componet 装饰器基础知识

十万猛虎下画山
 十万猛虎下画山
发布于 2017/08/30 15:36
字数 809
阅读 94
收藏 0

@Component

@Component 装饰器(告诉Angular2)将class标记为Angular组件并收集组件配置元数据。

npm Package

@angular/core

Module

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

Source

core/src/metadata/directives.ts

 

Metadata Overview(元数据概述)

@Component({

    changeDetection: ChangeDetectionStrategy

    viewProviders: Provider[]

    moduleId: string

    templateUrl: string

    template: string

    styleUrls: string[]

    styles: string[]

    animations: any[]

    encapsulation: ViewEncapsulation

    interpolation: [string, string]

    entryComponents: Array<Type<any>|any[]>

    preserveWhitespaces: boolean

})

 

How To Use(如何使用)

@Component({   //装饰器

selector: 'greet',

template: 'Hello {{name}}!' 

})

class Greet {//class

   name: string = 'World';

}

Description(描述)

Component decorator allows you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed, instantiated and used at runtime.

Component 装饰器允许你标记一个类作为Angular组件并提供额外的元数据,以确定如何在运行时处理,实例化和使用组件。

Components are the most basic building block of an UI in an Angular application.

组件是Angular UI界面最基本的构件(组件)。

An Angular application is a tree of Angular components.

一个Angular 应用是一个Angular 组件树(构成)。

Angular components are a subset of directives.

Angular组件是指令(directives)的一个子集(subset )

Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

与指令不同(Unlike不像),组件始终具有模板并且只能在模板中的元素中实例化一个组件。

A component must belong to an NgModule in order for it to be usable by another component or application.

组件必须属于NgModule,以便它可以被另一个组件或应用程序使用。

To specify that a component is a member of an NgModule, you should list it in the declarations field of that NgModule.

要指定组件是NgModule的成员,应将其列在该NgModule的声明字段中。

In addition to the metadata configuration specified via the Component decorator, components can control their runtime behavior by implementing various Life-Cycle hooks.

除了通过Component装饰器指定的元数据配置之外,组件还可以通过实现各种生命周期钩子来控制其运行时行为。

 

Metadata Properties(元数据属性):

  • animations - 该组件的动画列表
  • changeDetection -  该组件使用的更改检测策略
  • encapsulation - 此组件使用的样式封装策略
  • entryComponents - 动态插入到此组件的视图中的组件列表
  • exportAs - 组件实例在模板中导出的名称
  • host - 类属性映射到事件,属性和属性的主机元素绑定
  • inputs -将属性名列表列为数据绑定作为组件输入
  • interpolation - 此组件模板中使用的自定义插值标记
  • moduleId - 定义此组件的文件的ES / CommonJS模块ID
  • outputs - 列出其他可以订阅的输出事件的类属性名称
  • providers - 该组件及其子组件可用的提供程序列表
  • queries - 配置可以注入组件的查询
  • selector -css选择器,用于标识模板中的此组件
  • styleUrls - 要应用于此组件视图的样式表的URL列表
  • styles - 内联定义的样式应用于此组件的视图
  • template -视图的内联定义模板
  • templateUrl - url到包含视图模板的外部文件
  • viewProviders - 此组件及其查看子项可用的提供程序列表

Example

@Component({

selector: 'greet', 

template: 'Hello {{name}}!'

}) 

class Greet { name: string = 'World'; }

更多元数据属性以及描述可见 angular2 中文官网 虽然介绍和描述是英文的吧。。。

© 著作权归作者所有

共有 人打赏支持
十万猛虎下画山
粉丝 3
博文 97
码字总数 68887
作品 0
西城
程序员
使用Angular CLI生成的项目结构解说

项目结构 组件,是整个应用的基础。下图是组件的必备元素。 @Component:组件元数据装饰器,简称装饰器。装饰器告诉Angular框架如何处理一个TypeScript类。装饰器包含多个属性,属性的值叫做...

灯下草虫鸣_
2017/10/29
0
0
AngularJS2.0 教程系列(一)

Why Angular2 Angular1.x显然非常成功,那么,为什么要剧烈地转向Angular2? 性能的限制 AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移,各种特性 被加...

笔阁
2015/07/22
0
1
Angular 5 快速入门与提高

一、概述 尽管被称为,实际上它只是这个诞生于2012年的前端框架的的第四个版本: 看起来差不多半年就发布一个新版本,不过实际上从重写的版本开始,开发接口与核心思想就稳定下来了,并基本保...

笔阁
2017/11/03
0
11
最新的Angular 5 入门与提高

一、概述 尽管被称为,实际上它只是这个诞生于2012年的前端框架的的第四个版本: 看起来差不多半年就发布一个新版本,不过实际上从重写的版本开始,开发 接口与核心思想就稳定下来了,并基本...

马拉喀什
2017/11/03
0
0
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
06/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

linux 系统的运行级别

运行级别 运行级别 | 含义 0 关机 1 单用户模式,可以想象为windows 的安全模式,主要用于修复系统 2 不完全的命令模式,不含NFS服务 3 完全的命令行模式,就是标准的字符界面 4 系统保留 5 ...

Linux学习笔记
今天
1
0
学习设计模式——命令模式

任何模式的出现,都是为了解决一些特定的场景的耦合问题,以达到对修改封闭,对扩展开放的效果。命令模式也不例外: 命令模式是为了解决命令的请求者和命令的实现者之间的耦合关系。 解决了这...

江左煤郎
今天
2
0
字典树收集(非线程安全,后续做线程安全改进)

将500W个单词放进一个数据结构进行存储,然后进行快速比对,判断一个单词是不是这个500W单词之中的;来了一个单词前缀,给出500w个单词中有多少个单词是该前缀. 1、这个需求首先需要设计好数据结...

算法之名
昨天
12
0
GRASP设计模式

此文参考了这篇博客,建议读者阅读原文。 面向对象(Object-Oriented,OO)是当下软件开发的主流方法。在OO分析与设计中,我们首先从问题领域中抽象出领域模型,在领域模型中以适当的粒度归纳...

克虏伯
昨天
0
0
Coding and Paper Letter(四十)

资源整理。 1 Coding: 1.Tomislav Hengl撰写的非官方作者指南:Michael Gould•Wouter Gerritsma。 UnofficialGuide4Authors 2.R语言包rwrfhydro,社区贡献的工具箱,用于管理,分析和可视化...

胖胖雕
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部