angular中的@Component装饰器怎么使用

今天小编给大家分享一下angular中的@Component装饰器怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

目前创新互联建站已为近千家的企业提供了网站建设、域名、雅安服务器托管绵阳服务器托管、企业网站设计、商水网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

angular中的@Component装饰器怎么使用

一、 @Component 装饰器

1.1 @Component 装饰器的用途

声明一个组件时,在组件类的之上要用@Component装饰器来告知Angular这是一个组件。

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

@Component({
  selector: 'app-product-alerts',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
export class ProductAlertsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

1.2 @Component 装饰器的常用选项

@Component 装饰器继承于 Directive ,这个css选择器用于在模板中标记出该指令,并触发该指令的实例化。

1.2.1 继承自@Directive装饰器的选项

选项类型说明
selectorstringcss选择器名,用于在模板中标记出该指令(组件),并触发其实例化
inputsstring[]Angular 会在变更检测期间自动更新输入属性。inputs 属性定义了一组从 directiveProperty 指向 bindingProperty 的配置项:
· directiveProperty 用于指定要写入值的指令内属性。
· bindingProperty 用于指定要从中读取值的 DOM 属性。当没有提供 bindingProperty 时,就假设它和 directiveProperty 一样。
outputsstring[]一组可供事件绑定的输出属性。当输出属性发出事件时,就会调用模板中一个附加到该事件的处理器。每个输出属性都会把 directiveProperty 映射到 bindingProperty:
· directiveProperty 指定要发出事件的组件属性。
· bindingProperty 指定要附加事件处理器的 HTML 属性。
providesProvider[]服务提供商的集合
exportAsstring一个或多个名字,可以用来在模板中把该指令赋值给一个变量。当有多个名字时,请使用逗号分隔它们。
queries{[key:string]:any}配置将要注入到该指令中的一些查询。内容查询会在调用 ngAfterContentInit 回调之前设置好。 试图查询会在调用 ngAfterViewInit 回调之前设置好。
jittrue如果为 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 来获取事件数据。

1.2.2 @Component自己特有的选项

选项类型说明
changeDetectionChangeDetectionStrategy当组件实例化之后,Angular 就会创建一个变更检测器,它负责传播组件各个绑定值的变化。 该策略是下列值之一:
· ChangeDetectionStrategy#OnPush(0) 把策略设置为 CheckOnce(按需)。
· ChangeDetectionStrategy#Default(1) 把策略设置为 CheckAlways。
viewProvidersProvider[]定义一组可注入对象,它们在视图的各个子节点中可用
moduleIdstring包含该组件的那个模块的 ID。该组件必须能解析模板和样式表中使用的相对 URL。 SystemJS 在每个模块中都导出了 __moduleName 变量。在 CommonJS 中,它可以设置为module.id。
templateUrlstring组件模板文件的 URL。如果提供了它,就不要再用 template 来提供内联模板了。
templatestring组件的内联模板。如果提供了它,就不要再用 templateUrl 提供模板了。
styleUrlsstring[]一个或多个 URL,指向包含本组件 CSS 样式表的文件。
stylesstring[]本组件用到的一个或多个内联 CSS 样式。
animationsany[]一个或多个动画 trigger() 调用,包含一些 state() 和 transition() 定义。
encapsulationViewEncapsulation供模板和 CSS 样式使用的样式封装策略。取值为:
· ViewEncapsulation.ShadowDom:使用 Shadow DOM。它只在原生支持 Shadow DOM 的平台上才能工作。
· ViewEncapsulation.Emulated:使用垫片(shimmed) CSS 来模拟原生行为。
· ViewEncapsulation.None:使用全局 CSS,不做任何封装。
如果没有提供,该值就会从 CompilerOptions 中获取它。默认的编译器选项是 ViewEncapsulation.Emulated。如果该策略设置为 ViewEncapsulation.Emulated,并且该组件没有指定 styles 或 styleUrls,就会自动切换到 ViewEncapsulation.None。
interpolation[string, string]改写默认的插值表达式起止分界符({{ 和 }})
entryComponentsArrayany[]>
preserveWhitespacesboolean为 true 则保留,为 false 则从编译后的模板中移除可能多余的空白字符。 空白字符就是指那些能在 JavaScript 正则表达式中匹配 \s 的字符。默认为 false,除非通过编译器选项改写了它。

二、 selector 选择器

可使用下列形式之一:

  • element-name: 根据元素名选取

  • [attribute]: 根据属性名选取

  • .class: 根据类名选取

  • [attribute=value]: 根据属性名和属性值选取

  • not(sub_selector): 只有当元素不匹配子选择器 sub_selector 的时候才选取

  • selector1, selector2: 无论 selector1 还是 selector2 匹配时都选取

2.1 element-name: 根据元素名选取

@Component({
    selector: 'app-element',
    template:  './element.component.html',
    styleUrls: ['./element.component.css']
})

2.2 [attribute]: 根据属性名选取

@Component({
    selector: '[app-element]',
    template:  './element.component.html',
    styleUrls: ['./element.component.css']
})

2.3 .class: 根据类名选取

@Component({
    selector: '.app-element',
    template:  './element.component.html',
    styleUrls: ['./element.component.css']
})

三、 host: {[key:string]:string}

使用一组键-值对,把类的属性映射到宿主元素的绑定(Property、Attribute 和事件)。
Angular 在变更检测期间会自动检查宿主 Property 绑定。 如果绑定的值发生了变化,Angular 就会更新该指令的宿主元素。

对于事件处理:

3.1 attributeproperty

异同:

所以在 angular2 中双向绑定实现是由 dom 的 property 实现的,所以指令绑定的是 property ,但是在某些情况下 dom 不存在某个 property 比如 colspan,rowspan 等,这时想要绑定 html 标签特性需要用到 attr:


  
    Month
    Savings
  
  
    January
  
  
    February
  


let colnum:number = 2;

3.2 使用 host 绑定 class

@Component({
    selector: '.app-element',
    template:  './element.component.html',
    styleUrls: ['./element.component.css'],
    host: {
        '[class.default-class]': 'useDefault'
    },
    encapsulation: ViewEncapsulation.None // 让宿主元素也用上 element.component.css 样式。否则,默认胶囊封装避免CSS污染。
})
export class AppElementComponent {
  @Input() useDefault = true;
}

3.3 使用 host 绑定 style

@Component({
    selector: '.app-element',
    template:  './element.component.html',
    styleUrls: ['./element.component.css'],
    host: {
        '[style.background]': 'inputBackground'
    }
})
export class AppElementComponent {
  @Input() inputBackground = 'red';
}

3.4 使用 host 绑定事件

@Component({
    selector: '.app-element',
    template:  './element.component.html',
    styleUrls: ['./element.component.css'],
    host: {
        '(click)': 'onClick($event)'
    }
})
export class AppElementComponent {
  public onClick($event) {
    console.log($event);
  }
}

四、 encapsulation(封装)

供模板和 CSS 样式使用的样式封装策略。

4.1 Web Components

通过一种标准化的非侵入的方式封装一个组件,每个组件能组织好它自身的 HTML 结构、CSS 样式、JavaScript 代码,并且不会干扰页面上的其他元素。

Web Components 由以下四种技术组成:

4.2 Shadow DOM




    
    Shadow DOM
    
        .shadowroot_son {
            color: #f00;
        }
    


我不在 Shadow Host内

Hello, world!

4.3 ViewEncapsulation

ViewEncapsulation 允许设置三个可选的值:

4.3.1 ViewEncapsulation.None

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

@Component({
  selector: 'my-app',
  template: `
    
Welcome to Angular World
    Hello {{name}}

  `,   styles: [`     .greet {       background: #369;       color: white;     }   `],   encapsulation: ViewEncapsulation.None // None | Emulated | ShadowDom }) export class AppComponent {   name: string = 'Semlinker'; }

ViewEncapsulation.None 设置的结果是没有 Shadow DOM,并且所有的样式都应用到整个 document,换句话说,组件的样式会受外界影响,可能被覆盖掉。

4.3.2 ViewEncapsulation.Emulated

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

@Component({
  selector: 'my-app',
  ...,
  encapsulation: ViewEncapsulation.Emulated // None | Emulated | ShadowDom
})
export class AppComponent {
  name: string = 'Semlinker';
}

ViewEncapsulation.Emulated 设置的结果是没有 Shadow DOM,但是通过 Angular 提供的样式包装机制来封装组件,使得组件的样式不受外部影响。虽然样式仍然是应用到整个 document,但 Angular 为 .greet 类创建了一个 [_ngcontent-cmy-0] 选择器。可以看出,我们为组件定义的样式,被 Angular 修改了。其中的 _nghost-cmy- 和 _ngcontent-cmy- 用来实现局部的样式

4.3.3 ViewEncapsulation.ShadowDom

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

@Component({
  selector: 'my-app',
  ...,
  encapsulation: ViewEncapsulation.ShadowDom // None | Emulated | ShadowDom
})
export class AppComponent {
  name: string = 'Semlinker';
}

ViewEncapsulation.ShadowDom 设置的结果是使用原生的 Shadow DOM 特性。Angular 会把组件按照浏览器支持的 Shadow DOM 形式渲染

以上就是“angular中的@Component装饰器怎么使用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


网站标题:angular中的@Component装饰器怎么使用
标题网址:http://myzitong.com/article/gcijhp.html

其他资讯