目录
一、 @Component 装饰器
二、 selector 选择器
三、 host: {[key:string]:string}
四、 encapsulation(封装)
首页 web前端 js教程 深入了解angular中的@Component装饰器

深入了解angular中的@Component装饰器

May 27, 2022 pm 08:13 PM
angular angular.js

Component是Directive的子类,它是一个装饰器,用于把某个类标记为Angular组件。下面本篇文章就来带大家深入了解angular中的@Component装饰器,希望对大家有所帮助。

深入了解angular中的@Component装饰器

一、 @Component 装饰器

1.1 <span style="font-size: 18px;">@Component</span> 装饰器的用途

声明一个组件时,在组件类的之上要用@Component装饰器来告知Angular这是一个组件。【相关教程推荐:《angular教程》】

import { Component, OnInit } from &#39;@angular/core&#39;;

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

  constructor() { }

  ngOnInit() {
  }

}
登录后复制

1.2 <span style="font-size: 18px;">@Component</span> 装饰器的常用选项

@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 <span style="font-size: 18px;">element-name</span>: 根据元素名选取

@Component({
    selector: &#39;app-element&#39;,
    template:  &#39;./element.component.html&#39;,
    styleUrls: [&#39;./element.component.css&#39;]
})
登录后复制
<app-element></app-element>
登录后复制

2.2 <span style="font-size: 18px;">[attribute]</span>: 根据属性名选取

@Component({
    selector: &#39;[app-element]&#39;,
    template:  &#39;./element.component.html&#39;,
    styleUrls: [&#39;./element.component.css&#39;]
})
登录后复制
<div app-element></div>
登录后复制

2.3 <span style="font-size: 18px;">.class</span>: 根据类名选取

@Component({
    selector: &#39;.app-element&#39;,
    template:  &#39;./element.component.html&#39;,
    styleUrls: [&#39;./element.component.css&#39;]
})
登录后复制
<div class="app-element"></div>
登录后复制
登录后复制
登录后复制
登录后复制

三、 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.1 <span style="font-size: 18px;">attribute</span><span style="font-size: 18px;">property</span>

  • property:dom元素作为对象附加的内容,例如childNodes、firstChild等
  • attribute:HTML标签特性是dom节点自带的属性

异同:

  • 部分属性既属于 property ,又属于 attribute ,比如 id
  • attribute 初始化后不会再改变; property 默认值为初始值,会随着 dom 更新

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

<table width="100%" border="10px solid">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>January</td>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>February</td>
  </tr>
</table>

let colnum:number = 2;
登录后复制

3.2 使用 <span style="font-size: 18px;">host</span> 绑定 <span style="font-size: 18px;">class</span>

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

3.3 使用 <span style="font-size: 18px;">host</span> 绑定 <span style="font-size: 18px;">style</span>

@Component({
    selector: &#39;.app-element&#39;,
    template:  &#39;./element.component.html&#39;,
    styleUrls: [&#39;./element.component.css&#39;],
    host: {
        &#39;[style.background]&#39;: &#39;inputBackground&#39;
    }
})
export class AppElementComponent {
  @Input() inputBackground = &#39;red&#39;;
}
登录后复制
<div class="app-element"></div>
登录后复制
登录后复制
登录后复制
登录后复制

3.4 使用 <span style="font-size: 18px;">host</span> 绑定事件

@Component({
    selector: &#39;.app-element&#39;,
    template:  &#39;./element.component.html&#39;,
    styleUrls: [&#39;./element.component.css&#39;],
    host: {
        &#39;(click)&#39;: &#39;onClick($event)&#39;
    }
})
export class AppElementComponent {
  public onClick($event) {
    console.log($event);
  }
}
登录后复制
<div class="app-element"></div>
登录后复制
登录后复制
登录后复制
登录后复制

四、 encapsulation(封装)

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

4.1 Web Components

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

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

  • Custom Elements: 自定义元素HTML
  • Templates: HTML模板
  • Shadow DOM: 影子DOMHTML
  • Imports: HTML导入

4.2 Shadow DOM

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Shadow DOM</title>
    <style type="text/css">
        .shadowroot_son {
            color: #f00;
        }
    </style>
</head>
<body>
<p>我不在 Shadow Host内</p>
<div>Hello, world!</div>
<script>
 // 影子宿主(shadow host)
 var shadowHost = document.querySelector(&#39;.shadowhost&#39;);
 // 创建影子根(shadow root)
 var shadowRoot = shadowHost.createShadowRoot();
 // 影子根作为影子树的第一个节点,其他的节点比如p节点都是它的子节点。
 shadowRoot.innerHTML = &#39;<p>我在 Shadow Host内</p>&#39;;
</script>
</body>
<html>
登录后复制

4.3 <span style="font-size: 18px;">ViewEncapsulation</span>

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

  • ViewEncapsulation.Emulated: 无 Shadow DOM,但是通过 Angular 提供的样式包装机制来封装组件,使得组件的样式不受外部影响。这是 Angular 的默认设置。
  • ViewEncapsulation.ShadowDom: 使用原生的 Shadow DOM 特性
  • ViewEncapsulation.None: 无 Shadow DOM,并且也无样式包装

4.3.1 ViewEncapsulation.None

import { Component, ViewEncapsulation } from &#39;@angular/core&#39;;

@Component({
  selector: &#39;my-app&#39;,
  template: `
    <h4>Welcome to Angular World</h4>
    <p class="greet">Hello {{name}}</p>
  `,
  styles: [`
    .greet {
      background: #369;
      color: white;
    }
  `],
  encapsulation: ViewEncapsulation.None // None | Emulated | ShadowDom
})
export class AppComponent {
  name: string = &#39;Semlinker&#39;;
}
登录后复制

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

4.3.2 ViewEncapsulation.Emulated

import { Component, ViewEncapsulation } from &#39;@angular/core&#39;;

@Component({
  selector: &#39;my-app&#39;,
  ...,
  encapsulation: ViewEncapsulation.Emulated // None | Emulated | ShadowDom
})
export class AppComponent {
  name: string = &#39;Semlinker&#39;;
}
登录后复制

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 &#39;@angular/core&#39;;

@Component({
  selector: &#39;my-app&#39;,
  ...,
  encapsulation: ViewEncapsulation.ShadowDom // None | Emulated | ShadowDom
})
export class AppComponent {
  name: string = &#39;Semlinker&#39;;
}
登录后复制

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

更多编程相关知识,请访问:编程视频!!

以上是深入了解angular中的@Component装饰器的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

聊聊Angular中的元数据(Metadata)和装饰器(Decorator) 聊聊Angular中的元数据(Metadata)和装饰器(Decorator) Feb 28, 2022 am 11:10 AM

本篇文章继续Angular的学习,带大家了解一下Angular中的元数据和装饰器,简单了解一下他们的用法,希望对大家有所帮助!

Angular学习之聊聊独立组件(Standalone Component) Angular学习之聊聊独立组件(Standalone Component) Dec 19, 2022 pm 07:24 PM

本篇文章带大家继续angular的学习,简单了解一下Angular中的独立组件(Standalone Component),希望对大家有所帮助!

如何在Ubuntu 24.04上安装Angular 如何在Ubuntu 24.04上安装Angular Mar 23, 2024 pm 12:20 PM

Angular.js是一种可自由访问的JavaScript平台,用于创建动态应用程序。它允许您通过扩展HTML的语法作为模板语言,以快速、清晰地表示应用程序的各个方面。Angular.js提供了一系列工具,可帮助您编写、更新和测试代码。此外,它还提供了许多功能,如路由和表单管理。本指南将讨论在Ubuntu24上安装Angular的方法。首先,您需要安装Node.js。Node.js是一个基于ChromeV8引擎的JavaScript运行环境,可让您在服务器端运行JavaScript代码。要在Ub

angular学习之详解状态管理器NgRx angular学习之详解状态管理器NgRx May 25, 2022 am 11:01 AM

本篇文章带大家深入了解一下angular的状态管理器NgRx,介绍一下NgRx的使用方法,希望对大家有所帮助!

浅析angular中怎么使用monaco-editor 浅析angular中怎么使用monaco-editor Oct 17, 2022 pm 08:04 PM

angular中怎么使用monaco-editor?下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用,希望对大家有所帮助!

一文探究Angular中的服务端渲染(SSR) 一文探究Angular中的服务端渲染(SSR) Dec 27, 2022 pm 07:24 PM

你知道 Angular Universal 吗?可以帮助网站提供更好的 SEO 支持哦!

项目过大怎么办?如何合理拆分Angular项目? 项目过大怎么办?如何合理拆分Angular项目? Jul 26, 2022 pm 07:18 PM

Angular项目过大,怎么合理拆分它?下面本篇文章给大家介绍一下合理拆分Angular项目的方法,希望对大家有所帮助!

聊聊自定义angular-datetime-picker格式的方法 聊聊自定义angular-datetime-picker格式的方法 Sep 08, 2022 pm 08:29 PM

怎么自定义angular-datetime-picker格式?下面本篇文章聊聊自定义格式的方法,希望对大家有所帮助!

See all articles