摘要：组件元数据组件元数据等，下文将着重讲解每个元数据的含义。建议此时获取数据，不要在构造函数中获取。每次变化监测发生时被调用。销毁指令组件之前触发。
Web Component
在介绍Angular Component之前，我们先简单了解下W3C Web Components
定义W3C为统一组件化标准方式，提出Web Component的标准。
每个组件包含自己的html、css、js代码。
Web Component标准包括以下四个重要的概念：
Custom Elements（自定义标签）：可以创建自定义 HTML 标记和元素；
HTML Templates（HTML模版）：使用 标签去预定义一些内容，但并不加载至页面，而是使用 JS 代码去初始化它；
Shadow DOM（虚拟DOM）：可以创建完全独立与其他元素的DOM子树；
HTML Imports（HTML导入）：一种在 HTML 文档中引入其他 HTML 文档的方法，。
概括来说就是，可以创建自定义标签来引入组件是前端组件化的基础，在页面引用 HTML 文件和 HTML 模板是用于支撑编写组件视图和组件资源管理，而 Shadow DOM 则是隔离组件间代码的冲突和影响。
示例定义hello-component
Hello Web Component!
使用hello-component
Web Component
从以上代码可看到，hello.html 为按标准定义的组件（名称为 hello-component ），在这个组件中有自己的结构、样式及逻辑，然后在 index.html 中引入该组件文件，即可像普通标签一样使用。
Angular ComponentAngular Component属于指令的一种，可以理解为拥有模板的指令。其它两种是属性型指令和结构型指令。
基本组成@Component({
selector: "demo-component",
template: "Demo Component"
})
export class DemoComponent {}
组件装饰器：每个组件类必须用@component进行装饰才能成为Angular组件。
组件元数据：组件元数据：selector、template等，下文将着重讲解每个元数据的含义。
组件类：组件实际上也是一个普通的类，组件的逻辑都在组件类里定义并实现。
组件模板：每个组件都会关联一个模板，这个模板最终会渲染到页面上，页面上这个DOM元素就是此组件实例的宿主元素。
组件元数据 自身元数据属性| 名称 | 类型 | 作用 |
|---|---|---|
| animations | AnimationEntryMetadata[] | 设置组件的动画 |
| changeDetection | ChangeDetectionStrategy | 设置组件的变化监测策略 |
| encapsulation | ViewEncapsulation | 设置组件的视图包装选项 |
| entryComponents | any[] | 设置将被动态插入到该组件视图中的组件列表 |
| interpolation | [string, string] | 自定义组件的插值标记，默认是双大括号{{}} |
| moduleId | string | 设置该组件在 ES/CommonJS 规范下的模块id，它被用于解析模板样式的相对路径 |
| styleUrls | string[] | 设置组件引用的外部样式文件 |
| styles | string[] | 设置组件使用的内联样式 |
| template | string | 设置组件的内联模板 |
| templateUrl | string | 设置组件模板所在路径 |
| viewProviders | Provider[] | 设置组件及其所有子组件（不含ContentChildren）可用的服务 |
| 名称 | 类型 | 作用 |
|---|---|---|
| exportAs | string | 设置组件实例在模板中的别名，使得可以在模板中调用 |
| host | {[key: string]: string} | 设置组件的事件、动作和属性等 |
| inputs | string[] | 设置组件的输入属性 |
| outputs | string[] | 设置组件的输出属性 |
| providers | Provider[] | 设置组件及其所有子组件（含ContentChildren）可用的服务（依赖注入） |
| queries | {[key: string]: any} | 设置需要被注入到组件的查询 |
| selector | string | 设置用于在模板中识别该组件的css选择器（组件的自定义标签） |
以下几种元数据的等价写法会比元数据设置更简洁易懂，所以一般推荐的是等价写法。inputs
@Component({
selector: "demo-component",
inputs: ["param"]
})
export class DemoComponent {
param: any;
}
等价于：
@Component({
selector: "demo-component"
})
export class DemoComponent {
@Input() param: any;
}
outputs
@Component({
selector: "demo-component",
outputs: ["ready"]
})
export class DemoComponent {
ready = new eventEmitter();
}
等价于：
@Component({
selector: "demo-component"
})
export class DemoComponent {
@Output() ready = new eventEmitter();
}
host
@Component({
selector: "demo-component",
host: {
"(click)": "onClick($event.target)", // 事件
"role": "nav", // 属性
"[class.pressed]": "isPressed", // 类
}
})
export class DemoComponent {
isPressed: boolean = true;
onClick(elem: HTMLElement) {
console.log(elem);
}
}
等价于：
@Component({
selector: "demo-component"
})
export class DemoComponent {
@HostBinding("attr.role") role = "nav";
@HostBinding("class.pressed") isPressed: boolean = true;
@HostListener("click", ["$event.target"])
onClick(elem: HTMLElement) {
console.log(elem);
}
}
queries - 视图查询
@Component({
selector: "demo-component",
template: `
Demo Component
`,
queries: {
theInput: new ViewChild("theInput")
}
})
export class DemoComponent {
theInput: ElementRef;
}
等价于：
@Component({
selector: "demo-component",
template: `
Demo Component
`
})
export class DemoComponent {
@ViewChild("theInput") theInput: ElementRef;
}
queries - 内容查询
{{item}}
@Directive({
selector: "li"
})
export class ListItem {}
@Component({
selector: "my-list",
template: `
等价于：
@Component({
selector: "my-list",
template: `
styleUrls和styles允许同时指定。
优先级：模板内联样式 > styleUrls > styles。
建议：使用styleUrls引用外部样式表文件，这样代码结构相比styles更清晰、更易于管理。同理，模板推荐使用templateUrl引用模板文件。
changeDetectionChangeDetectionStrategy.Default：组件的每次变化监测都会检查其内部的所有数据（引用对象也会深度遍历），以此得到前后的数据变化。
ChangeDetectionStrategy.OnPush：组件的变化监测只检查输入属性（即@Input修饰的变量）的值是否发生变化，当这个值为引用类型（Object，Array等）时，则只对比该值的引用。
显然，OnPush策略相比Default降低了变化监测的复杂度，很好地提升了变化监测的性能。如果组件的更新只依赖输入属性的值，那么在该组件上使用OnPush策略是一个很好的选择。
encapsulationViewEncapsulation.None：无 Shadow DOM，并且也无样式包装。
ViewEncapsulation.Emulated：无 Shadow DOM，但是通过Angular提供的样式包装机制来模拟组件的独立性，使得组件的样式不受外部影响，这是Angular的默认设置。
ViewEncapsulation.Native：使用原生的 Shadow DOM 特性。
生命周期当Angular使用构造函数新建组件后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法：
| 生命周期钩子 | 调用时机 |
|---|---|
| ngOnChanges | 在ngOnInit之前调用，或者当组件输入数据（通过@Input装饰器显式指定的那些变量）变化时调用。 |
| ngOnInit | 第一次ngOnChanges之后调用。建议此时获取数据，不要在构造函数中获取。 |
| ngDoCheck | 每次变化监测发生时被调用。 |
| ngAfterContentInit | 使用 |
| ngAfterContentChecked | ngAfterContentInit后被调用，或者每次变化监测发生时被调用（只适用组件）。 |
| ngAfterViewInit | 创建了组件的视图及其子视图之后被调用（只适用组件）。 |
| ngAfterViewChecked | ngAfterViewInit，或者每次子组件变化监测时被调用（只适用组件）。 |
| ngOnDestroy | 销毁指令/组件之前触发。此时应将不会被垃圾回收器自动回收的资源（比如已订阅的观察者事件、绑定过的DOM事件、通过setTimeout或setInterval设置过的计时器等等）手动销毁掉。 |
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/93643.html
摘要：别着急，的开发团队已经考虑到了这个问题，上述的检测机制只是一种默认的检测机制，还提供一种的检测机制设置元数据属性。 什么是变化监测 在使用 Angular 进行开发中，我们常用到 Angular 中的绑定——模型到视图的输入绑定、视图到模型的输出绑定以及视图与模型的双向绑定。而这些绑定的值之所以能在视图与模型之间保持同步，正是得益于Angular中的变化检测。 简单来说，变化检测就是 ...
摘要：以下是关于中一些模块的概要以及它们与这篇文章的关联性这个模块实现了我们在这篇文章中讨论的关于的几个回调函数，同时它还会初始化一个策略类，这个类会作为连接和的桥梁。 现在，Angular Elements 这个项目已经在社区引起一定程度的讨论。这是显而易见的，因为 Angular Elements 提供了很多开箱即用的、十分强大的功能： 通过使用原生的 HTML 语法来使用 Angul...
摘要：在应用开发中，组件可以说是随处可见的。本篇文章将介绍几种常见的组件通讯场景，也就是让两个或多个组件之间交互的方法。父组件绑定到这个事件属性，并在事件发生时作出回应。然后通过的元数据数组提供服务的实例，并通过构造函数分别注入到父子组件中。 在Angular应用开发中，组件可以说是随处可见的。本篇文章将介绍几种常见的组件通讯场景，也就是让两个或多个组件之间交互的方法。 根据数据的传递方向，...
摘要：他们即不是指令，也不应该使用组件代替指令，除非你正在用控制器升级模板指令，组件还包含数据事件的输入与输出，生命周期钩子和使用单向数据流以及从父组件上获取数据的事件对象。 showImg(https://segmentfault.com/img/bVynsJ); 关键词 架构, 文件结构, 组件, 单向数据流以及最佳实践 来自 @toddmotto 团队的编码指南 Angular 的编码...
摘要：你是一个对感兴趣的开发者吗不用担心，这真的不会让你成为一个背叛者或其他什么，真的。事实上，这个想法并不是或独创的它只是一种很棒的软件开发实践方式。把代码分离到不同的文件里并不会自动导致关注点分离。 原文链接 : Getting to Grips with React (as an Angular developer)原文作者 : DAVE CEDDIA译者 : 李林璞（web前端领域）...
阅读 652·2021-11-15 11:37
阅读 3982·2021-09-09 09:34
阅读 3534·2019-08-30 15:52
阅读 2542·2019-08-29 14:03
阅读 2816·2019-08-26 13:36
阅读 1537·2019-08-26 12:16
阅读 1571·2019-08-26 11:45
阅读 3438·2019-08-23 18:41
