Analyzing the source code examples of Angular Component-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Analyzing the source code examples of Angular Component

亚连

May 26, 2018 pm 03:43 PM

angular component Example

This article mainly introduces the source code examples of analyzing Angular Component. Now I share it with you and give you a reference.

Web Component

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

Definition

W3C proposes the standard of Web Component to unify the standard way of componentization.

Each component contains its own html, css, and js code.
Web Component standard includes the following four important concepts:
1.Custom Elements (custom tags): You can create custom HTML tags and elements;
2.HTML Templates (HTML templates): use < ;template> tag to predefine some content, but it does not load it into the page, but uses JS code to initialize it;
3.Shadow DOM (virtual DOM): You can create a DOM subtree that is completely independent from other elements;
4.HTML Imports: A method of introducing other HTML documents into HTML documents, .

In summary, the ability to create custom tags to introduce components is the basis for front-end componentization. References to HTML files and HTML templates on the page are used to support writing component views and component resource management, while Shadow DOM It is to isolate the conflicts and impacts of code between components.

Example

Define hello-component

<template id="hello-template">
  <style>
    h1 {
      color: red;
    }
  </style>
  <h1>Hello Web Component!</h1>
</template>

<script>

  // 指向导入文档，即本例的index.html
  var indexDoc = document;

  // 指向被导入文档，即当前文档hello.html
  var helloDoc = (indexDoc._currentScript || indexDoc.currentScript).ownerDocument;

  // 获得上面的模板
  var tmpl = helloDoc.querySelector(&#39;#hello-template&#39;);

  // 创建一个新元素的原型，继承自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(&#39;hello-component&#39;, {
    prototype: HelloProto
  });
</script>

Copy after login

Use hello-component

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="赖祥燃, laixiangran@163.com, http://www.laixiangran.cn"/>
  <title>Web Component</title>
  <!--导入自定义组件-->
  <link rel="import" href="hello.html" rel="external nofollow" >
</head>
<body>
  <!--自定义标签-->
  <hello-component></hello-component>
</body>
</html>

Copy after login

As you can see from the above code, hello.html is a component defined according to standards (named hello-component). This component has its own structure, style and logic, and then introduce the component file in index.html, and it can be used 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: &#39;demo-component&#39;,
  template: &#39;Demo Component&#39;
})
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 TypeFunctionanimationsAnimationEntryMetadata[]Setting component AnimationchangeDetectionChangeDetectionStrategySet the component’s change detection strategyencapsulationViewEncapsulationSet the component's view packaging optionsentryComponentsany[]The settings will be dynamically inserted into Component list in this component viewinterpolation[string, string]Interpolation mark of custom component, the default is double curly bracketsmoduleIdstringSet the module id of the component under the ES/CommonJS specification, which is used to resolve the relative path of template stylesstyleUrlsstring[]Set the external style file referenced by the componentstylesstring[]Set the inline style used by the componenttemplatestringSet the inline template of the component templateUrlstringSet the path to the component templateviewProviders Provider[]Sets the services available to the component and all its subcomponents (excluding ContentChildren)

Inherits from core/Directive

NameTypeFunctionexportAsstringSet the alias of the component instance in the template so that it can be called in the templatehost{ [key: string]: string}Set the events, actions and properties of the componentinputsstring[]Set the input properties of the componentoutputsstring[]Set the output properties of the componentprovidersProvider[]Set the services (dependency injection) available to the component and all its subcomponents (including ContentChildren)queries{[key: string]: any}Set the query that needs to be injected into the componentselectorstringSet the css selector (custom label of the component) used to identify the component in the template

几种元数据详解

以下几种元数据的等价写法会比元数据设置更简洁易懂，所以一般推荐的是等价写法。

inputs

@Component({
  selector: &#39;demo-component&#39;,
  inputs: [&#39;param&#39;]
})
export class DemoComponent {
  param: any;
}

Copy after login

等价于：

@Component({
  selector: &#39;demo-component&#39;
})
export class DemoComponent {
  @Input() param: any;
}

Copy after login

outputs

@Component({
  selector: &#39;demo-component&#39;,
  outputs: [&#39;ready&#39;]
})
export class DemoComponent {
  ready = new eventEmitter<false>();
}

Copy after login

等价于：

@Component({
  selector: &#39;demo-component&#39;
})
export class DemoComponent {
  @Output() ready = new eventEmitter<false>();
}

Copy after login

host

@Component({
  selector: &#39;demo-component&#39;,
  host: {
    &#39;(click)&#39;: &#39;onClick($event.target)&#39;, // 事件
    &#39;role&#39;: &#39;nav&#39;, // 属性
    &#39;[class.pressed]&#39;: &#39;isPressed&#39;, // 类
  }
})
export class DemoComponent {
  isPressed: boolean = true;

  onClick(elem: HTMLElement) {
    console.log(elem);
  }
}

Copy after login

等价于：

@Component({
  selector: &#39;demo-component&#39;
})
export class DemoComponent {
  @HostBinding(&#39;attr.role&#39;) role = &#39;nav&#39;;
  @HostBinding(&#39;class.pressed&#39;) isPressed: boolean = true;

 
  @HostListener(&#39;click&#39;, [&#39;$event.target&#39;])
  onClick(elem: HTMLElement) {
    console.log(elem);
  }
}

Copy after login

queries - 视图查询

@Component({
  selector: &#39;demo-component&#39;,
  template: `
    <input #theInput type=&#39;text&#39; />
    <p>Demo Component</p>
  `,
  queries: {
    theInput: new ViewChild(&#39;theInput&#39;)
  }
})
export class DemoComponent {
  theInput: ElementRef;
}

Copy after login

等价于：

@Component({
  selector: &#39;demo-component&#39;,
  template: `
    <input #theInput type=&#39;text&#39; />
    <p>Demo Component</p>
  `
})
export class DemoComponent {
  @ViewChild(&#39;theInput&#39;) theInput: ElementRef;
}

Copy after login

queries - 内容查询

<my-list>
  <li *ngFor="let item of items;">{{item}}</li>
</my-list>

Copy after login

@Directive({
  selector: &#39;li&#39;
})
export class ListItem {}

Copy after login

@Component({
  selector: &#39;my-list&#39;,
  template: `
    <ul>
      <ng-content></ng-content>
    </ul>
  `,
  queries: {
    items: new ContentChild(ListItem)
  }
})
export class MyListComponent {
  items: QueryList<ListItem>;
}

Copy after login

等价于：

@Component({
  selector: &#39;my-list&#39;,
  template: `
    <ul>
      <ng-content></ng-content>
    </ul>
  `
})
export class MyListComponent {
  @ContentChild(ListItem) items: QueryList<ListItem>;
}

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	使用
ngAfterContentChecked	ngAfterContentInit后被调用，或者每次变化监测发生时被调用（只适用组件）。
ngAfterViewInit	创建了组件的视图及其子视图之后被调用（只适用组件）。
ngAfterViewChecked	ngAfterViewInit，或者每次子组件变化监测时被调用（只适用组件）。
ngOnDestroy	销毁指令/组件之前触发。此时应将不会被垃圾回收器自动回收的资源（比如已订阅的观察者事件、绑定过的DOM事件、通过setTimeout或setInterval设置过的计时器等等）手动销毁掉。

上面是我整理给大家的，希望今后会对大家有帮助。

Ajax发送和接收二进制字节流数据的方法

laypage前端分页插件实现ajax异步分页

ajax文件上传成功解决浏览器兼容问题

The above is the detailed content of Analyzing the source code examples of Angular Component. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Will R.E.P.O. Have Crossplay?

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7549

CakePHP Tutorial

1382

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

How to install Angular on Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

Angular.js is a freely accessible JavaScript platform for creating dynamic applications. It allows you to express various aspects of your application quickly and clearly by extending the syntax of HTML as a template language. Angular.js provides a range of tools to help you write, update and test your code. Additionally, it provides many features such as routing and form management. This guide will discuss how to install Angular on Ubuntu24. First, you need to install Node.js. Node.js is a JavaScript running environment based on the ChromeV8 engine that allows you to run JavaScript code on the server side. To be in Ub

Introduction to Python functions: Introduction and examples of exec function Nov 03, 2023 pm 02:09 PM

Introduction to Python functions: Introduction and examples of exec function Introduction: In Python, exec is a built-in function that is used to execute Python code stored in a string or file. The exec function provides a way to dynamically execute code, allowing the program to generate, modify, and execute code as needed during runtime. This article will introduce how to use the exec function and give some practical code examples. How to use the exec function: The basic syntax of the exec function is as follows: exec

Go language indentation specifications and examples Mar 22, 2024 pm 09:33 PM

Indentation specifications and examples of Go language Go language is a programming language developed by Google. It is known for its concise and clear syntax, in which indentation specifications play a crucial role in the readability and beauty of the code. effect. This article will introduce the indentation specifications of the Go language and explain in detail through specific code examples. Indentation specifications In the Go language, tabs are used for indentation instead of spaces. Each level of indentation is one tab, usually set to a width of 4 spaces. Such specifications unify the coding style and enable teams to work together to compile

Oracle DECODE function detailed explanation and usage examples Mar 08, 2024 pm 03:51 PM

The DECODE function in Oracle is a conditional expression that is often used to return different results based on different conditions in query statements. This article will introduce the syntax, usage and sample code of the DECODE function in detail. 1. DECODE function syntax DECODE(expr,search1,result1[,search2,result2,...,default]) expr: the expression or field to be compared. search1,

Introduction to Python functions: Usage and examples of abs function Nov 03, 2023 pm 12:05 PM

Introduction to Python functions: usage and examples of the abs function 1. Introduction to the usage of the abs function In Python, the abs function is a built-in function used to calculate the absolute value of a given value. It can accept a numeric argument and return the absolute value of that number. The basic syntax of the abs function is as follows: abs(x) where x is the numerical parameter to calculate the absolute value, which can be an integer or a floating point number. 2. Examples of abs function Below we will show the usage of abs function through some specific examples: Example 1: Calculation

Introduction to Python functions: Usage and examples of isinstance function Nov 04, 2023 pm 03:15 PM

Introduction to Python functions: Usage and examples of the isinstance function Python is a powerful programming language that provides many built-in functions to make programming more convenient and efficient. One of the very useful built-in functions is the isinstance() function. This article will introduce the usage and examples of the isinstance function and provide specific code examples. The isinstance() function is used to determine whether an object is an instance of a specified class or type. The syntax of this function is as follows

Angular components and their display properties: understanding non-block default values Mar 15, 2024 pm 04:51 PM

The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.

Interviewer: The difference between @Configuration and @Component Aug 15, 2023 pm 04:29 PM

Calling the @Bean annotated method in the @Configuration class returns the same example; calling the @Bean annotated method in the @Component class returns a new instance.

See all articles