Angular(二) - 组件Component
1. 组件Component示例
组件是由一个装饰器@Component
来声明的,继承自@Directive
import {Component} from '@angular/core';
@Component({
selector: 'app-root233', // 这个 CSS 选择器用于在模板中标记出该指令,并触发该指令的实例化
templateUrl: './app.component.html', // 指定html模板
styleUrls: ['./app.component.css'] // 指定css
})
export class AppComponent {
title = 'angularapp-2'; // 这里定义的title和enn可以在html中{{ title }}使用
enn = true
}
2. Component常用的几个选项
@Component
最常用的几个选项是:
- selector:这个 CSS 选择器用于在模板中标记出该指令,并触发该指令的实例化。
- template:组件的内联模板,为组件展示的内容,一般内容比较少时使用。如果提供了它,就不要再用 templateUrl 提供模板了
- templateUrl:组件模板文件的 URL。如果提供了它,就不要再用 template 来提供内联模板了。
- providers :使用一个 令牌 配置该指令或组件的 注入器,该令牌会映射到一个依赖项的提供商
- exportAs :一个或多个名字,可以用来在模板中把该指令赋值给一个变量。当有多个名字时,请使用逗号分隔它们
3. Component全部的选项
3.1 继承自@Directive装饰器的选项
选项 | 类型 | 说明 |
---|---|---|
selector | string | css选择器名,用于在模板中标记出该指令(组件),并触发其实例化 |
inputs | string[] | Angular 会在变更检测期间自动更新输入属性。 inputs 属性定义了一组从 directiveProperty 指向 bindingProperty 的配置项: · directiveProperty 用于指定要写入值的指令内属性。 · bindingProperty 用于指定要从中读取值的 DOM 属性。 当没有提供 bindingProperty 时,就假设它和 directiveProperty 一样。 例如: |
outputs | string[] | 一组可供事件绑定的输出属性。当输出属性发出事件时,就会调用模板中一个附加到该事件的处理器。 每个输出属性都会把 directiveProperty 映射到 bindingProperty: · directiveProperty 指定要发出事件的组件属性。 · bindingProperty 指定要附加事件处理器的 HTML 属性。 |
provides | Provider[] | 服务提供商的集合 |
exportAs | string | 一个或多个名字,可以用来在模板中把该指令赋值给一个变量。当有多个名字时,请使用逗号分隔它们。 |
queries | [{key:string]:any} | 配置将要注入到该指令中的一些查询。 内容查询会在调用 ngAfterContentInit 回调之前设置好。 试图查询会在调用 ngAfterViewInit 回调之前设置好。 |
jit | true | 如果为 true,则该指令/组件将会被 AOT 编译器忽略,因此永远只会被 JIT 编译。 这个选项是为了支持未来的 Ivy 编译器,目前还没有效果。 |
host | [{key:string]:string} | 使用一组键-值对,把类的属性映射到宿主元素的绑定(Property、Attribute 和事件)。 Angular 在变更检测期间会自动检查宿主 Property 绑定。 如果绑定的值发生了变化,Angular 就会更新该指令的宿主元素。 当 key 是宿主元素的 Property 时,这个 Property 值就会传播到指定的 DOM 属性。 当 key 是 DOM 中的静态 Attribute 时,这个 Attribute 值就会传播到宿主元素上指定的 Property 去。 对于事件处理: · 它的 key 就是该指令想要监听的 DOM 事件。 要想监听全局事件,请把要监听的目标添加到事件名的前面。 这个目标可以是 window、document 或 body。 · 它的 value 就是当该事件发生时要执行的语句。如果该语句返回 false,那么就会调用这个 DOM 事件的 preventDefault 函数。 这个语句中可以引用局部变量 $event 来获取事件数据。 |
3.2 @Component自己特有的选项
选项 | 类型 | 说明 |
---|---|---|
changeDetection | ChangeDetectionStrategy | 当组件实例化之后,Angular 就会创建一个变更检测器,它负责传播组件各个绑定值的变化。 该策略是下列值之一: · ChangeDetectionStrategy#OnPush(0) 把策略设置为 CheckOnce(按需)。 · ChangeDetectionStrategy#Default(1) 把策略设置为 CheckAlways。 |
viewProviders | Provider[] | 定义一组可注入对象,它们在视图的各个子节点中可用 |
moduleId | string | 包含该组件的那个模块的 ID。该组件必须能解析模板和样式表中使用的相对 URL。 SystemJS 在每个模块中都导出了 __moduleName 变量。在 CommonJS 中,它可以设置为module.id。 |
templateUrl | string | 组件模板文件的 URL。如果提供了它,就不要再用 template 来提供内联模板了。 |
template | string | 组件的内联模板。如果提供了它,就不要再用 templateUrl 提供模板了。 |
styleUrls | string[] | 一个或多个 URL,指向包含本组件 CSS 样式表的文件。 |
styles | string[] | 本组件用到的一个或多个内联 CSS 样式。 |
animations | any[] | 一个或多个动画 trigger() 调用,包含一些 state() 和 transition() 定义。 |
encapsulation | ViewEncapsulation | 供模板和 CSS 样式使用的样式封装策略。取值为: · ViewEncapsulation.Native:使用 Shadow DOM。它只在原生支持 Shadow DOM 的平台上才能工作。 · ViewEncapsulation.Emulated:使用垫片(shimmed) CSS 来模拟原生行为。 · ViewEncapsulation.None:使用全局 CSS,不做任何封装。 如果没有提供,该值就会从 CompilerOptions 中获取它。默认的编译器选项是 ViewEncapsulation.Emulated。 如果该策略设置为 ViewEncapsulation.Emulated,并且该组件没有指定 styles 或 styleUrls,就会自动切换到 ViewEncapsulation.None。 |
interpolation | [string, string] | 改写默认的插值表达式起止分界符({{ 和 }}) |
entryComponents | Array | 一个组件的集合,它应该和当前组件一起编译。对于这里列出的每个组件,Angular 都会创建一个 ComponentFactory 并保存进 ComponentFactoryResolver 中。 |
preserveWhitespaces | boolean | 为 true 则保留,为 false 则从编译后的模板中移除可能多余的空白字符。 空白字符就是指那些能在 JavaScript 正则表达式中匹配 \s 的字符。默认为 false,除非通过编译器选项改写了它。 |
4. 自定义component
angular提供了命令行可以生成组件,不用手动创建,下面是一个例子
# 在app/component文件夹下生成一个叫custom的组件
ng g component component/custom
生成出来的结果
Angular(二) - 组件Component的更多相关文章
- Salesforce Lightning开发学习(二)Component组件开发实践
lightning的组件区分标准组件.自定义组件和AppExchange组件.标准组件由SF提供,自定义组件由developer自行开发,AppExchange组件由合作伙伴建立.下面我们写一个简单的 ...
- vue从入门到进阶:组件Component详解(六)
一.什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功 ...
- angular学习—组件
组件: vue组件:xxx.vue react组件:xxx.js+xxx.css angular组件:xxx.ts+xxx.css+xxx.html angular的装饰器: @ngModule:an ...
- Angular 父子组件传值
Angular 父子组件传值 @Input @Output @ViewChild 新建一个头部组件 newsheader 在主组件引用 news 组件,在news组件添加 newsheader 组 ...
- Angular 动态组件
Angular 动态组件 实现步骤 Directive HostComponent 动态组件 AdService 配置AppModule 需要了解的概念 Directive 我们需要一个Directi ...
- Vue教程:组件Component详解(六)
一.什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功 ...
- react基础用法二(组件渲染)
react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 /> ...
- 【Angular】No component factory found for ×××.
报错现象: 用modal打开某个组件页面时报错 报错:No component factory found for UpdateAuthWindowComponent. Did you add it ...
- Exploring the Angular 1.5 .component() method
Angular 1.5 introduced the .component() helper method, which is much simpler than the.directive() de ...
随机推荐
- 新手阅读 Nebula Graph 源码的姿势
摘要:在本文中,我们将通过数据流快速学习 Nebula Graph,以用户在客户端输入一条 nGQL 语句 SHOW SPACES 为例,使用 GDB 追踪语句输入时 Nebula Graph 是怎么 ...
- Python数据类型-dic,set常见操作
字典常见方法 语法:字典名[新key]=value 功能:给字典增加键值 语法:字典名[字典里存在的key]=新的value 功能:修改字典里的值 功能:删除字典的元素,通过key来进行删除, ...
- Django Web 测试
Django 单元测试 模拟浏览器发起请求,测试 web 功能.只是简单记录一下怎么使用. 环境 Win10 Python2.7 Django 1.8.11 MySQL5.6 项目结构 大致如下 my ...
- XCTF-WEB-新手练习区(1-4)笔记
靶场地址:https://adworld.xctf.org.cn/ 1:view_source X老师让小宁同学查看一个网页的源代码,但小宁同学发现鼠标右键好像不管用了. 原理:使用浏览器F12或者B ...
- C# 委托 应用实例
用一句话解释委托:委托是一种可以把引用存储为函数的类型. 有些类似Spring框架对于接口的用法,向Action中注入Service对象.Action并不知道调用哪个服务层,只有容器通过配置文件 向A ...
- CSS 学习第二天
超链接的样式: 1.颜色变化:未访问时的样式a:link:鼠标点击后的样式a:visited;鼠标放上去的样式a:hover;鼠标点击时的样式a:active 2.鼠标变小手:cursor:point ...
- 制作 macOS Sierra U盘USB启动安装盘方法教程 (亲测)
备注:相关镜像到apple官网下载 https://discussionschinese.apple.com/thread/250596904 进去点击"请使用这个 App Store 链接 ...
- LeetCode 309 Best Time to Buy and Sell Stock with Cooldown 解决方案
题目描述 给定一个整数数组,其中第 i 个元素代表了第 i 天的股票价格 . 设计一个算法计算出最大利润.在满足以下约束条件下,你可以尽可能地完成更多的交易(多次买卖一支股票): 你不能同时参与多笔 ...
- ldap登录验证的通用步骤
和利用数据库进行验证类似,LDAP中也是利用登陆名和密码进行验证,LDAP中会定义一个属性password,用来存放用户密码,而登陆名使用较多的都是mail地址.那怎么样才能正确的用LDAP进行身份验 ...
- 【趣味设计模式系列】之【代理模式2--JDK动态代理源码解析】
1. 图解 上图主要描述了JDK动态代理的执行过程,下面做详细分析. 2. Proxy源码分析 上一篇,在使用JDK动态代理的时候,借助于Proxy类,使用newProxyInstance静态方法,创 ...