Analyser les exemples de code source du composant angulaire
Cet article présente principalement l'exemple de code source d'analyse du composant angulaire. Maintenant, je le partage avec vous et le donne comme référence.
Composant Web
Avant d'introduire le composant angulaire, comprenons brièvement les composants Web du W3C
Définition
Le W3C propose le standard de Web Component afin d'unifier la méthode standard de composantisation.
Chaque composant contient son propre code html, css et js.
Le standard des composants Web comprend les quatre concepts importants suivants :
1.Éléments personnalisés (balises personnalisées) : vous pouvez créer des balises et des éléments HTML personnalisés
2.Modèles HTML (modèles HTML) : utilisez < ;template> ; ; balise pour prédéfinir du contenu, mais il ne le charge pas dans la page, mais utilise du code JS pour l'initialiser
3 Shadow DOM (DOM virtuel) : vous pouvez créer un sous-arbre DOM complètement indépendant des autres éléments ; ;
4.Importations HTML : Une méthode d'introduction d'autres documents HTML dans des documents HTML, .
En résumé, la possibilité de créer des balises personnalisées pour introduire des composants est la base de la composantisation frontale. Les références aux fichiers HTML et aux modèles HTML sur la page sont utilisées pour prendre en charge l'écriture de vues de composants et la gestion des ressources des composants. Shadow DOM Il s'agit d'isoler les conflits et les impacts du code entre les composants.
Exemple
Définir 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('#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
});
</script>Utiliser 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>
Comme vous pouvez le voir dans le code ci-dessus, hello.html est un composant défini par le standard (nommé hello-component), et ce composant a son propre structure, style et logique, puis introduisez le fichier de composant dans index.html pour l'utiliser comme une balise normale.
Composant angulaire
Le composant angulaire est un type de directive et peut être compris comme une directive avec un modèle. Les deux autres types sont les directives d'attribut et les directives structurelles.
Composition de base
@Component({
selector: 'demo-component',
template: 'Demo Component'
})
export class DemoComponent {}Décorateur de composants : chaque classe de composants doit utiliser @component Décoration est requis pour devenir un composant angulaire.
Métadonnées des composants : Métadonnées des composants : sélecteur, modèle, etc. Ce qui suit se concentrera sur la signification de chaque métadonnée.
Classe de composant : le composant est en fait une classe ordinaire, et la logique du composant est définie et implémentée dans la classe de composant.
Modèle de composant : Chaque composant est associé à un modèle, qui sera finalement rendu sur la page. L'élément DOM de la page est l'élément hôte de cette instance de composant.
Métadonnées des composants
Propriétés des métadonnées personnelles
| 名称 | 类型 | 作用 |
|---|---|---|
| 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）可用的服务 |
Héritées du noyau/de la 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;
}等价于：
@Component({
selector: 'demo-component'
})
export class DemoComponent {
@Input() param: any;
}outputs
@Component({
selector: 'demo-component',
outputs: ['ready']
})
export class DemoComponent {
ready = new eventEmitter<false>();
}等价于：
@Component({
selector: 'demo-component'
})
export class DemoComponent {
@Output() ready = new eventEmitter<false>();
}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: `
<input #theInput type='text' />
<p>Demo Component</p>
`,
queries: {
theInput: new ViewChild('theInput')
}
})
export class DemoComponent {
theInput: ElementRef;
}等价于：
@Component({
selector: 'demo-component',
template: `
<input #theInput type='text' />
<p>Demo Component</p>
`
})
export class DemoComponent {
@ViewChild('theInput') theInput: ElementRef;
}queries - 内容查询
<my-list>
<li *ngFor="let item of items;">{{item}}</li>
</my-list>@Directive({
selector: 'li'
})
export class ListItem {}@Component({
selector: 'my-list',
template: `
<ul>
<ng-content></ng-content>
</ul>
`,
queries: {
items: new ContentChild(ListItem)
}
})
export class MyListComponent {
items: QueryList<ListItem>;
}等价于：
@Component({
selector: 'my-list',
template: `
<ul>
<ng-content></ng-content>
</ul>
`
})
export class MyListComponent {
@ContentChild(ListItem) items: QueryList<ListItem>;
}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设置过的计时器等等）手动销毁掉。 |
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment installer Angular sur Ubuntu 24.04
Mar 23, 2024 pm 12:20 PM
Angular.js est une plateforme JavaScript librement accessible pour créer des applications dynamiques. Il vous permet d'exprimer rapidement et clairement divers aspects de votre application en étendant la syntaxe HTML en tant que langage de modèle. Angular.js fournit une gamme d'outils pour vous aider à écrire, mettre à jour et tester votre code. De plus, il offre de nombreuses fonctionnalités telles que le routage et la gestion des formulaires. Ce guide expliquera comment installer Angular sur Ubuntu24. Tout d’abord, vous devez installer Node.js. Node.js est un environnement d'exécution JavaScript basé sur le moteur ChromeV8 qui vous permet d'exécuter du code JavaScript côté serveur. Être à Ub
Introduction aux fonctions Python : Introduction et exemples de fonction exec
Nov 03, 2023 pm 02:09 PM
Introduction aux fonctions Python : Introduction et exemples de fonction exec Introduction : En Python, exec est une fonction intégrée utilisée pour exécuter du code Python stocké dans une chaîne ou un fichier. La fonction exec fournit un moyen d'exécuter dynamiquement du code, permettant au programme de générer, modifier et exécuter du code selon les besoins pendant l'exécution. Cet article explique comment utiliser la fonction exec et donne quelques exemples de code pratiques. Comment utiliser la fonction exec : La syntaxe de base de la fonction exec est la suivante : exec
Mar 22, 2024 pm 09:33 PM
Spécifications d'indentation et exemples du langage Go Le langage Go est un langage de programmation développé par Google. Il est connu pour sa syntaxe concise et claire, dans laquelle les spécifications d'indentation jouent un rôle crucial dans la lisibilité et la beauté du code. Cet article présentera les spécifications d'indentation du langage Go et les expliquera en détail à travers des exemples de code spécifiques. Spécifications d'indentation Dans le langage Go, les tabulations sont utilisées pour l'indentation au lieu des espaces. Chaque niveau d'indentation correspond à un onglet, généralement défini sur une largeur de 4 espaces. De telles spécifications unifient le style de codage et permettent aux équipes de travailler ensemble pour compiler
Explication détaillée de la fonction Oracle DECODE et exemples d'utilisation
Mar 08, 2024 pm 03:51 PM
La fonction DECODE dans Oracle est une expression conditionnelle souvent utilisée pour renvoyer différents résultats en fonction de différentes conditions dans les instructions de requête. Cet article présentera en détail la syntaxe, l'utilisation et un exemple de code de la fonction DECODE. 1. Syntaxe de la fonction DECODE DECODE(expr,search1,result1[,search2,result2,...,default]) expr : l'expression ou le champ à comparer. recherche1,
Introduction aux fonctions Python : utilisation et exemples de fonction abs
Nov 03, 2023 pm 12:05 PM
Introduction aux fonctions Python : utilisation et exemples de la fonction abs 1. Introduction à l'utilisation de la fonction abs En Python, la fonction abs est une fonction intégrée utilisée pour calculer la valeur absolue d'une valeur donnée. Il peut accepter un argument numérique et renvoyer la valeur absolue de ce nombre. La syntaxe de base de la fonction abs est la suivante : abs(x) où x est le paramètre numérique permettant de calculer la valeur absolue, qui peut être un nombre entier ou un nombre à virgule flottante. 2. Exemples de fonction abs Ci-dessous, nous montrerons l'utilisation de la fonction abs à travers quelques exemples spécifiques : Exemple 1 : Calcul
Composants angulaires et leurs propriétés d'affichage : comprendre les valeurs par défaut non bloquantes
Mar 15, 2024 pm 04:51 PM
Le comportement d'affichage par défaut des composants du framework Angular ne concerne pas les éléments au niveau du bloc. Ce choix de conception favorise l'encapsulation des styles de composants et encourage les développeurs à définir consciemment la manière dont chaque composant est affiché. En définissant explicitement l'affichage des propriétés CSS, l'affichage des composants angulaires peut être entièrement contrôlé pour obtenir la mise en page et la réactivité souhaitées.
Introduction aux fonctions Python : utilisation et exemples de la fonction isinstance
Nov 04, 2023 pm 03:15 PM
Introduction aux fonctions Python : utilisation et exemples de la fonction isinstance Python est un langage de programmation puissant qui fournit de nombreuses fonctions intégrées pour rendre la programmation plus pratique et efficace. L'une des fonctions intégrées très utiles est la fonction isinstance(). Cet article présentera l'utilisation et des exemples de la fonction isinstance et fournira des exemples de code spécifiques. La fonction isinstance() est utilisée pour déterminer si un objet est une instance d'une classe ou d'un type spécifié. La syntaxe de cette fonction est la suivante
Intervieweur : La différence entre @Configuration et @Component
Aug 15, 2023 pm 04:29 PM
L’appel de la méthode annotée @Bean dans la classe @Configuration renvoie le même exemple ; l’appel de la méthode annotée @Bean dans la classe @Component renvoie une nouvelle instance.
