Web Component

This article introduces you to Angular development practice (3): Analyzing Angular Component. Interested friends can take a look at

Web Component Before introducing Angular Component, Let’s first briefly understand W3C Web Components

Definition W3C is a unified component standard method and proposes the standard of Web Component.

Each component contains its own html, css, and js code.

Web Component standard includes the following four important concepts:

Custom Elements (custom tags): Yes Create custom HTML tags and elements;

##HTML Templates: Use the tag to predefine some content but not load it into page, but use JS code to initialize it;

Shadow DOM (virtual DOM): You can create a DOM subtree that is completely independent from other elements;

HTML Imports: A method of introducing other HTML documents into an HTML document, .

In summary, you can create custom tags to introduce components, which is the basis of front-end componentization. References to HTML files and HTML templates on the page are used to support the writing of component views and component resources. Management, while Shadow DOM isolates code conflicts and impacts between components.

Example Define hello-component

h1 { color: red; } Hello Web Component! // 指向导入文档，即本例的index.html var indexDoc = document; // 指向被导入文档，即当前文档hello.html var helloDoc = (indexDoc._currentScript || indexDoc.currentScript).ownerDocument; // 获得上面的模板 var tmpl = helloDoc.querySelector('#hello-template'); // 创建一个新元素的原型，继承自HTMLElement var HelloProto = Object.create(HTMLElement.prototype); // 设置 Shadow DOM 并将模板的内容克隆进去 HelloProto.createdCallback = function() { var root = this.createShadowRoot(); root.appendChild(indexDoc.importNode(tmpl.content, true)); }; // 注册新元素 var hello = indexDoc.registerElement('hello-component', { prototype: HelloProto }); Copy after login Use hello-component

Web Component Copy after login As you can see from the above code, hello.html is defined according to the standard Component (named hello-component) has its own structure, style and logic. Then introduce the component file in index.html and use it like a normal tag.

Angular Component Angular Component is a type of directive and can be understood as a directive with a template. The other two types are attribute directives and structural directives.

Basic composition @Component({ selector: 'demo-component', template: 'Demo Component' }) export class DemoComponent {} Copy after login Component decorator: Each component class must be decorated with @component to become an Angular component.

Component metadata: Component metadata: selector , template , etc. The following will focus on the meaning of each metadata.

Component class: Component is actually an ordinary class, and the logic of the component is defined and implemented in the component class.

Component template: Each component will be associated with a template, which will eventually be rendered on the page. The DOM element on the page is the host element of this component instance. .

Component metadata Self metadata attributes Name Type Function ##animations AnimationEntryMetadata[] Set the animation of the component changeDetection ChangeDetectionStrategy Set the component's change detection strategy encapsulation ViewEncapsulation Set the component’s view packaging options entryComponents any[] Set the list of components that will be dynamically inserted into this component view interpolation [string, string] The interpolation mark of the custom component, the default is double braces {{}} moduleId string Set the module id of this component under the ES/CommonJS specification, which is used to resolve the relative path of template styles styleUrls string[] Set the external style file referenced by the component styles string[ ] Set the inline style used by the component template string Setting Component’s inline template templateUrl string Set the path where the component template is located viewProviders Provider[] Sets the services available to the component and all its subcomponents (excluding ContentChildren) 从 core/Directive 继承 名称 类型 作用 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; } Copy after login 等价于：

@Component({ selector: 'demo-component' }) export class DemoComponent { @Input() param: any; } Copy after login outputs @Component({ selector: 'demo-component', outputs: ['ready'] }) export class DemoComponent { ready = new eventEmitter (); } Copy after login 等价于：

@Component({ selector: 'demo-component' }) export class DemoComponent { @Output() ready = new eventEmitter (); } Copy after login 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); } } Copy after login 等价于：

@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); } } Copy after login queries - 视图查询 @Component({ selector: 'demo-component', template: ` Demo Component

`, queries: { theInput: new ViewChild('theInput') } }) export class DemoComponent { theInput: ElementRef; } Copy after login 等价于：

@Component({ selector: 'demo-component', template: ` Demo Component

` }) export class DemoComponent { @ViewChild('theInput') theInput: ElementRef; } Copy after login queries - 内容查询 {{item}} Copy after login @Directive({ selector: 'li' }) export class ListItem {} Copy after login @Component({ selector: 'my-list', template: ` `, queries: { items: new ContentChild(ListItem) } }) export class MyListComponent { items: QueryList ; } Copy after login 等价于：

@Component({ selector: 'my-list', template: ` ` }) export class MyListComponent { @ContentChild(ListItem) items: QueryList ; } Copy after login styleUrls、styles styleUrls和styles允许同时指定。

优先级：模板内联样式 > styleUrls > styles。

建议：使用styleUrls引用外部样式表文件，这样代码结构相比styles更清晰、更易于管理。同理，模板推荐使用templateUrl引用模板文件。

changeDetection ChangeDetectionStrategy.Default：组件的每次变化监测都会检查其内部的所有数据（引用对象也会深度遍历），以此得到前后的数据变化。

ChangeDetectionStrategy.OnPush：组件的变化监测只检查输入属性（即 @Input 修饰的变量）的值是否发生变化，当这个值为引用类型（Object，Array等）时，则只对比该值的引用。

显然，OnPush策略相比Default降低了变化监测的复杂度，很好地提升了变化监测的性能。如果组件的更新只依赖输入属性的值，那么在该组件上使用OnPush策略是一个很好的选择。

encapsulation ViewEncapsulation.None：无 Shadow DOM，并且也无样式包装。

ViewEncapsulation.Emulated：无 Shadow DOM，但是通过Angular提供的样式包装机制来模拟组件的独立性，使得组件的样式不受外部影响，这是Angular的默认设置。

ViewEncapsulation.Native：使用原生的 Shadow DOM 特性。

生命周期 当Angular使用构造函数新建组件后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法：

生命周期钩子 调用时机 ngOnChanges 在ngOnInit之前调用，或者当组件输入数据（通过 @Input 装饰器显式指定的那些变量）变化时调用。 ngOnInit 第一次ngOnChanges之后调用。 建议此时获取数据，不要在构造函数中获取 。 ngDoCheck 每次变化监测发生时被调用。 ngAfterContentInit 使用 将外部内容嵌入到组件视图后被调用，第一次ngDoCheck之后调用且只执行一次（只适用组件）。 ngAfterContentChecked ngAfterContentInit后被调用，或者每次变化监测发生时被调用（只适用组件）。 ngAfterViewInit 创建了组件的视图及其子视图之后被调用（只适用组件）。 ngAfterViewChecked ngAfterViewInit，或者每次子组件变化监测时被调用（只适用组件）。 ngOnDestroy 销毁指令/组件之前触发。此时应将不会被垃圾回收器自动回收的资源（ 比如已订阅的观察者事件、绑定过的DOM事件、通过setTimeout或setInterval设置过的计时器等等 ）手动销毁掉。 相关推荐：

Angular开发实践（一）：环境准备及框架搭建

Angular开发实践（二）：HRM运行机制

Angular Development Practice (3): Analyzing Angular Component

Web Component

Definition

@Component({ selector: 'demo-component', template: 'Demo Component' }) export class DemoComponent {}
Copy after login

从 core/Directive 继承

几种元数据详解

inputs

outputs

host

queries - 视图查询

queries - 内容查询

styleUrls、styles

changeDetection

encapsulation

生命周期

Hot AI Tools

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

Hot Article

Hot Tools

Notepad++7.3.1

SublimeText3 Chinese version

Zend Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac version

Hot Topics


	Set the animation of the component
	Set the component's change detection strategy
	Set the component’s view packaging options
	Set the list of components that will be dynamically inserted into this component view
	The interpolation mark of the custom component, the default is double braces
	Set the module id of this component under the ES/CommonJS specification, which is used to resolve the relative path of template styles
	Set the external style file referenced by the component
	Set the inline style used by the component
	Setting Component’s inline template
	Set the path where the component template is located
	Sets the services available to the component and all its subcomponents (excluding ContentChildren)

名称	类型	作用
exportAs	`string`	设置组件实例在模板中的别名，使得可以在模板中调用
host	`{[key: string]: string}`	设置组件的事件、动作和属性等
inputs	`string[]`	设置组件的输入属性
outputs	`string[]`	设置组件的输出属性
providers	`Provider[]`	设置组件及其所有子组件（含ContentChildren）可用的服务（依赖注入）
queries	`{[key: string]: any}`	设置需要被注入到组件的查询
selector	`string`	设置用于在模板中识别该组件的css选择器（组件的自定义标签）

生命周期钩子	调用时机
ngOnChanges	在ngOnInit之前调用，或者当组件输入数据（通过`@Input`装饰器显式指定的那些变量）变化时调用。
ngOnInit	第一次ngOnChanges之后调用。建议此时获取数据，不要在构造函数中获取。
ngDoCheck	每次变化监测发生时被调用。
ngAfterContentInit	使用将外部内容嵌入到组件视图后被调用，第一次ngDoCheck之后调用且只执行一次（只适用组件）。
ngAfterContentChecked	ngAfterContentInit后被调用，或者每次变化监测发生时被调用（只适用组件）。
ngAfterViewInit	创建了组件的视图及其子视图之后被调用（只适用组件）。
ngAfterViewChecked	ngAfterViewInit，或者每次子组件变化监测时被调用（只适用组件）。
ngOnDestroy	销毁指令/组件之前触发。此时应将不会被垃圾回收器自动回收的资源（比如已订阅的观察者事件、绑定过的DOM事件、通过setTimeout或setInterval设置过的计时器等等）手动销毁掉。

Angular Development Practice (3): Analyzing Angular Component

Web Component

Definition

@Component({ selector: 'demo-component', template: 'Demo Component' }) export class DemoComponent {}Copy after login

从 core/Directive 继承

几种元数据详解

inputs

outputs

host

queries - 视图查询

queries - 内容查询

styleUrls、styles

changeDetection

encapsulation

生命周期

Hot AI Tools

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

Hot Article

Hot Tools

Notepad++7.3.1

SublimeText3 Chinese version

Zend Studio 13.0.1

Dreamweaver CS6

SublimeText3 Mac version

Hot Topics

@Component({ selector: 'demo-component', template: 'Demo Component' }) export class DemoComponent {}
Copy after login