angular创建component,angular常用组件
是Component Directive的子类，Component Directive是一个装饰器，用于将一个类标记为有角度的组件。下面这篇文章将带你浏览angular中的@Component decorator，希望对你有所帮助。
一、 @Component 装饰器
1.1 @Component 装饰器的用途
当声明一个组件时，在组件类的顶部使用@Component decorator来告诉Angular它是一个组件。【相关教程推荐：《angular教程》】
从“@angular/core”导入{ Component，on init }；
@组件({
选择器：“应用程序-产品-提醒”，
templateUrl:“”。/product-alerts.component.html ，
样式URL:[。/product-alerts . component . CSS ]
})
导出类ProductAlertsComponent实现OnInit {
构造函数(){ }
ngOnInit() {
}
}1.2 @Component 装饰器的常用选项
@Component Decorator继承自指令。这个css选择器用于标记模板中的指令，并触发指令的实例化。
1.2.1 继承自@Directive装饰器的选项
类型描述selectorstringcss选择器名称用于标记模板中的指令(组件)并触发其实例化。inputstring[]Angular将在变化检测期间自动更新输入属性。输入属性定义一组从directiveProperty指向bindingProperty的配置项：
DirectiveProperty用于指定要将值写入的指令内属性。
BindingProperty用于指定从中读取值的DOM属性。如果未提供bindingProperty，则假定它与directiveProperty相同。Outputsstring[]一组可以由事件绑定的输出属性。当output属性发出一个事件时，它调用模板中附加到该事件的处理器。每个输出属性都将directiveProperty映射到bindingProperty:
DirectiveProperty指定发出事件的组件的属性。
BindingProperty指定要附加的事件处理程序的HTML属性。exportAsstring(一组providesProvider[]服务提供者)的一个或多个名称可用于将此指令分配给模板中的变量。当有多个名称时，请用逗号分隔。查询{[key:string]:any}配置一些将注入到该指令中的查询。将在调用ngAfterContentInit回调之前设置查询。尝试的查询将在调用ngAfterViewInit回调之前设置。True JIT如果为True，指令/组件将被AOT编译器忽略，因此它将永远只被JIT编译。这个选项是为了支持未来的Ivy编译器，现在还不行。Host{[key:string]:string}使用一组键值对将类的属性映射到主机元素的绑定(属性、特性和事件)。Angular在更改检测期间自动检查主机属性绑定。如果绑定的值改变，Angular将更新指令的主机元素。当key是宿主元素的属性时，该属性值将被传播到指定的DOM属性。当键是DOM中的静态属性时，属性值将被传播到主机元素上的指定属性。对于事件处理：
它的关键是指令想要监听的DOM事件。要监视全局事件，请在事件名称前添加要监视的目标。这个目标可以是窗口、文档或正文。
它的值是事件发生时要执行的语句。如果语句返回false，将调用这个DOM事件的preventDefault函数。可以在该语句中引用局部变量$event来获取事件数据。1.2.2 @Component自己特有的选项
选项描述changetectionchangetectionstrategy组件实例化时，Angular会创建一个变化检测器，负责传播组件每个绑定值的变化。该策略是下列值之一：
更改检测策略# on push (0)将策略设置为CheckOnce(按需)。
changetectionstrategy # default(1)将策略设置为CheckAlways。ViewProviderProvider []定义了一组可注入的对象，这些对象可以包含该组件在带有moduleIdstring的视图的每个子节点中的模块的ID。该组件必须能够解析模板和样式表中使用的相对URL。SystemJS已经导出了每个模块中的__moduleName变量。在CommonJS中，可以设置为组件模板文件的module . id URL template urlstring URL。如果提供了，就不要用template来提供内联模板。templatestring组件的内联模板。如果提供了，不要用templateUrl提供模板。一个或多个URL，指向包含该组件的CSS样式表的文件。Stylesstring[]该组件使用的一个或多个内联CSS样式。animation any[]一个或多个动画trigger()调用，包括一些state()和transition()定义。EncapsulationViewEncapsulation是模板和CSS样式的样式封装策略。这些值是：
查看封装。暗影dom:使用暗影DOM。它只在原生支持影子DOM的平台上工作。
查看封装。Emulated:使用shim CSS来模拟本机行为。
View encapsulation.none:使用不带任何封装的全局CSS。
如果未提供，该值将从CompilerOptions中获取。默认的编译器选项是ViewEncapsulation。如果策略设置为ViewEncapsulation，则模拟。如果组件没有指定样式或styleUrls，它将自动切换到ViewEncapsulation。None Interpolation[string，string]覆盖插值表达式的默认起止分隔符({{ and}})。EntryComponentArrayTypeAny[]preservewhitespace boolean为true则保留它，为false则从编译后的模板中删除可能的冗余空白字符。空白指的是JavaScript正则表达式中可以匹配\s的那些字符。默认值为false，除非被编译器选项覆盖。
二、 selector 选择器
可以使用以下形式之一：
元素名称：根据元素名称选择【属性】；选择。class:根据类名选择[attribute=value]；根据属性名和属性值选择not(子选择器)；仅当元素与sub_selector不匹配时，才选择selector1和selector 2；无论选择器1或选择器2是否匹配，都选择2.1 element-name： 根据元素名选取。
@组件({
选择器：“应用程序元素”，
模板：。/element.component.html ，
样式URL:[。/element.component.css]
})应用元素/应用元素2.2 [attribute]： 根据属性名选取
@组件({
选择器：“[应用程序元素]”，
模板：。/element.component.html ，
样式URL:[。/element.component.css]
})div应用程序元素/div2.3 .class： 根据类名选取
@组件({
选择器：。应用程序元素，
模板：。/element.component.html ，
样式URL:[。/element.component.css]
})div class= app-element /div
三、 host: {[key:string]:string}
使用一组键值对将类的属性映射到宿主元素的绑定(属性、特性和事件)。
Angular在更改检测期间自动检查主机属性绑定。如果绑定的值改变，Angular将更新指令的主机元素。
当key是宿主元素的属性时，该属性值将被传播到指定的DOM属性。当键是DOM中的静态属性时，属性值将被传播到主机元素上的指定属性。请注意，默认情况下，属性的值是一个变量。如果直接使用属性值，则需要添加字符串单引号或双引号。可以在组件中直接定义变量来处理事件：
它的关键是指令想要监听的DOM事件。要监视全局事件，请在事件名称前添加要监视的目标。这个目标可以是窗口、文档或正文。它的值是事件发生时要执行的语句。如果语句返回false，将调用这个DOM事件的preventDefault函数。可以在该语句中引用局部变量$event来获取事件数据。3.1 attribute 和 property
属性：dom元素附加在对象上，比如childNodes，firstChild等。属性：HTML标签特性是dom节点自身属性的异同点：
部分属性既属于财产，又属于属性，比如编号属性初始化后不会再改变；财产默认值为初始值，会随着数字正射影像图更新所以在angular2中双向绑定实现是由数字正射影像图的财产实现的，所以指令绑定的是财产，但是在某些情况下数字正射影像图不存在某个财产比如colspan，rowspan等，这时想要绑定超文本标记语言标签特性需要用到属性：
表格宽度=100% 边框=10px实线
tr
第/个月
泰国(Thailand)节省/th
/tr
tr
TD[属性。colspan]=colnum January/TD
/tr
tr
TD[属性。colspan]=colnumFebruary/TD
/tr
/表格
设colnum:number=2；3.2 使用 host 绑定 class
@组件({
选择器：。应用程序元素，
模板：。/element.component.html ，
样式URL:[ ./element.component.css]，
主机：{
““班级。default-class]":"useDefault "
},
封装：视图封装。无//让宿主元素也用上element.component.css样式。否则，默认胶囊封装避免半铸钢钢性铸铁(铸造半钢)污染。
})
导出类AppElementComponent {
@ Input()useDefault=true；
} div class= app-element /div3.3 使用 host 绑定 style
@组件({
选择器：。应用程序元素，
模板：。/element.component.html ，
样式URL:[ ./element.component.css]，
主机：{
“[风格。背景]":"输入背景"
}
})
导出类AppElementComponent {
@ Input()输入背景= red
} div class= app-element /div3.4 使用 host 绑定事件
@组件({
选择器：。应用程序元素，
模板：。/element.component.html ，
样式URL:[ ./element.component.css]，
主机：{
（点击): onClick($event)
}
})
导出类AppElementComponent {
公共onClick($event) {
控制台。日志($ event)；
}
} div class= app-element /div
四、 encapsulation（封装）
供模板和半铸钢钢性铸铁(铸造半钢)样式使用的样式封装策略。
4.1 Web Components
通过一种标准化的非侵入的方式封装一个组件，每个组件能组织好它自身的超文本标记语言结构、CSS样式、JavaScript代码，并且不会干扰页面上的其他元素。
网组件由以下四种技术组成：
自定义元素：自定义元素超文本标记语言模板：HTML模板阴影DOM:影子DOMHTMLImports: HTML导入4.2 Shadow DOM
！声明文档类型
超文本标记语言
头
meta charset=UTF-8
标题阴影DOM/标题
style type=text/css 。shadowroot_son {
颜色：# f00
}
/风格
/头
身体
p我不在影子主机内/p
divHello，世界！/div
脚本
//影子宿主（影子主机)
var shadow host=文档。查询选择器(.影子主机);
//创建影子根（影子根)
var shadow root=影子主机。create shadow root()；
//影子根作为影子树的第一个节点，其他的节点比如p节点都是它的子节点。
shadowRoot.innerHTML=p我在影子主机内/p ；
/脚本
/body
html4.3 ViewEncapsulation
视图封装允许设置三个可选的值：
查看封装。仿真：无影子多姆，但是通过有角的提供的样式包装机制来封装组件，使得组件的样式不受外部影响。这是有角的的默认设置视图封装。暗影王国：使用原生的阴影数字正射影像图特性查看封装。无：无影子多姆，并且也无样式包装4.3.1 ViewEncapsulation.None
从" @角度/核心"导入{组件，视图封装}；
@组件({
选择器："我的应用程序",
模板：` 1
h4欢迎来到角度世界/h4
p class=greetHello {{name}}/p
`,
风格：[`风格。问候{
背景：# 369;
颜色：白色；
}
`],
封装：视图封装。无//无模拟阴影世界
})
导出类AppComponent {
name:string= SEM链接器；
}视图封装。没有人设置的结果是没有影子多姆，并且所有的样式都应用到整个文档，换句话说，组件的样式会受外界影响，可能被覆盖掉。
4.3.2 ViewEncapsulation.Emulated
从" @角度/核心"导入{组件，视图封装}；
@组件({
选择器："我的应用程序",
.
封装：视图封装。仿真//无仿真阴影世界
})
导出类AppComponent {
name:string= SEM链接器；
}视图封装。仿真设置导致没有阴影DOM，但是组件的样式被Angular提供的样式包装机制封装，这样组件的样式就不会受到外界的影响。虽然样式仍然应用于整个文档，但是Angular已经为。问候班级。可以看到我们为组件定义的样式已经被Angular修改了。其中_ ngost-cmy-和_ngcontent-cmy-用于实现本地样式。
4.3.3 ViewEncapsulation.ShadowDom
从“@angular/core”导入{ Component，view encapsulation }；
@组件({
选择器：“我的应用程序”，
.
封装：视图封装。ShadowDom //None 仿真 ShadowDom
})
导出类AppComponent {
name:string= SEM linker ；
}ViewEncapsulation的结果。ShadowDom设置是使用原生的Shadow DOM特性。Angular会以浏览器支持的阴影DOM形式渲染组件。
有关编程的更多信息，请访问：编程视频！那就是在angular里多了解一下@Component decorator的细节。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。