Analyse der Quellcodebeispiele von Angular Component
In diesem Artikel wird hauptsächlich das Quellcode-Beispiel zur Analyse von Angular Component vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.
Webkomponente
Bevor wir Angular Component vorstellen, wollen wir kurz die W3C-Webkomponenten verstehen
Definition
W3C schlägt den Web Component-Standard vor, um die Standardmethode der Komponentisierung zu vereinheitlichen.
Jede Komponente enthält ihren eigenen HTML-, CSS- und JS-Code.
Der Web Component-Standard umfasst die folgenden vier wichtigen Konzepte:
1.Benutzerdefinierte Elemente (benutzerdefinierte Tags): Sie können benutzerdefinierte HTML-Tags und -Elemente erstellen.
2.HTML-Vorlagen (HTML-Vorlagen): Verwenden Sie < ;template> ;-Tag, um einige Inhalte vorzudefinieren, diese jedoch nicht in die Seite zu laden, sondern JS-Code zu verwenden, um sie zu initialisieren.
3: Sie können einen DOM-Teilbaum erstellen, der völlig unabhängig von anderen Elementen ist ;
4.HTML-Importe: Eine Methode zum Einfügen anderer HTML-Dokumente in HTML-Dokumente, .
Zusammenfassend ist die Möglichkeit, benutzerdefinierte Tags zum Einführen von Komponenten zu erstellen, die Grundlage der Front-End-Komponentisierung. Verweise auf HTML-Dateien und HTML-Vorlagen auf der Seite werden verwendet, um das Schreiben von Komponentenansichten und die Komponentenressourcenverwaltung zu unterstützen Shadow DOM dient dazu, die Konflikte und Auswirkungen des Codes zwischen Komponenten zu isolieren.
Beispiel
Hallo-Komponente definieren
<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>Hallo-Komponente verwenden
<!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>
Wie Sie dem obigen Code entnehmen können, ist hello.html eine vom Standard definierte Komponente (mit dem Namen hello-component). Diese Komponente hat ihre eigene Struktur, ihren eigenen Stil und Logik, und führen Sie dann die Komponentendatei in index.html ein, und sie kann wie ein normales Tag verwendet werden.
Angular Component
Angular Component ist eine Art Direktive und kann als Direktive mit Vorlage verstanden werden. Die anderen beiden Typen sind Attributdirektiven und Strukturdirektiven.
Grundkomposition
@Component({
selector: 'demo-component',
template: 'Demo Component'
})
export class DemoComponent {}Komponentendekorateur: Jede Komponentenklasse muss mit @component dekoriert werden eine Winkelkomponente.
Komponentenmetadaten: Komponentenmetadaten: Selektor, Vorlage usw. Im Folgenden konzentrieren wir uns auf die Bedeutung der einzelnen Metadaten.
Komponentenklasse: Komponente ist eigentlich eine gewöhnliche Klasse, und die Logik der Komponente wird in der Komponentenklasse definiert und implementiert.
Komponentenvorlage: Jede Komponente ist einer Vorlage zugeordnet, die schließlich auf der Seite gerendert wird. Das DOM-Element auf der Seite ist das Hostelement dieser Komponenteninstanz.
Komponentenmetadaten
Selbstmetadateneigenschaften
| 名称 | 类型 | 作用 |
|---|---|---|
| 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）可用的服务 |
Von Kern/Direktive geerbt
| 名称 | 类型 | 作用 |
|---|---|---|
| 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设置过的计时器等等）手动销毁掉。 |
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Das obige ist der detaillierte Inhalt vonAnalyse der Quellcodebeispiele von Angular Component. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Einführung in Python-Funktionen: Einführung und Beispiele der Exec-Funktion
Nov 03, 2023 pm 02:09 PM
Einführung in Python-Funktionen: Einführung und Beispiele der Exec-Funktion Einführung: In Python ist Exec eine integrierte Funktion, die zum Ausführen von Python-Code verwendet wird, der in einer Zeichenfolge oder Datei gespeichert ist. Die exec-Funktion bietet eine Möglichkeit, Code dynamisch auszuführen, sodass das Programm während der Laufzeit nach Bedarf Code generieren, ändern und ausführen kann. In diesem Artikel wird die Verwendung der Exec-Funktion vorgestellt und einige praktische Codebeispiele gegeben. So verwenden Sie die Exec-Funktion: Die grundlegende Syntax der Exec-Funktion lautet wie folgt: exec
So installieren Sie Angular unter Ubuntu 24.04
Mar 23, 2024 pm 12:20 PM
Angular.js ist eine frei zugängliche JavaScript-Plattform zum Erstellen dynamischer Anwendungen. Es ermöglicht Ihnen, verschiedene Aspekte Ihrer Anwendung schnell und klar auszudrücken, indem Sie die Syntax von HTML als Vorlagensprache erweitern. Angular.js bietet eine Reihe von Tools, die Sie beim Schreiben, Aktualisieren und Testen Ihres Codes unterstützen. Darüber hinaus bietet es viele Funktionen wie Routing und Formularverwaltung. In dieser Anleitung wird erläutert, wie Angular auf Ubuntu24 installiert wird. Zuerst müssen Sie Node.js installieren. Node.js ist eine JavaScript-Ausführungsumgebung, die auf der ChromeV8-Engine basiert und es Ihnen ermöglicht, JavaScript-Code auf der Serverseite auszuführen. In Ub sein
Ausführliche Erklärung und Anwendungsbeispiele der Oracle DECODE-Funktion
Mar 08, 2024 pm 03:51 PM
Die DECODE-Funktion in Oracle ist ein bedingter Ausdruck, der häufig verwendet wird, um unterschiedliche Ergebnisse basierend auf unterschiedlichen Bedingungen in Abfrageanweisungen zurückzugeben. In diesem Artikel werden die Syntax, Verwendung und der Beispielcode der DECODE-Funktion im Detail vorgestellt. 1. Syntax der DECODE-Funktion DECODE(expr,search1,result1[,search2,result2,...,default]) expr: der zu vergleichende Ausdruck oder das zu vergleichende Feld. Suche1,
Spezifikationen und Beispiele für Go-Spracheinrückungen
Mar 22, 2024 pm 09:33 PM
Einrückungsspezifikationen und Beispiele der Go-Sprache Die von Google entwickelte Programmiersprache ist für ihre prägnante und klare Syntax bekannt, bei der Einrückungsspezifikationen eine entscheidende Rolle für die Lesbarkeit und Schönheit des Codes spielen. In diesem Artikel werden die Einrückungsspezifikationen der Go-Sprache vorgestellt und anhand spezifischer Codebeispiele ausführlich erläutert. Einrückungsspezifikationen In der Go-Sprache werden Tabulatoren anstelle von Leerzeichen zum Einrücken verwendet. Jede Einrückungsebene besteht aus einem Tabulator, der normalerweise auf eine Breite von 4 Leerzeichen eingestellt ist. Solche Spezifikationen vereinheitlichen den Codierungsstil und ermöglichen es Teams, beim Kompilieren zusammenzuarbeiten
Einführung in Python-Funktionen: Verwendung und Beispiele der isinstance-Funktion
Nov 04, 2023 pm 03:15 PM
Einführung in Python-Funktionen: Verwendung und Beispiele der isinstance-Funktion Python ist eine leistungsstarke Programmiersprache, die viele integrierte Funktionen bereitstellt, um das Programmieren komfortabler und effizienter zu gestalten. Eine der sehr nützlichen integrierten Funktionen ist die Funktion isinstance(). In diesem Artikel werden die Verwendung und Beispiele der Funktion isinstance vorgestellt und spezifische Codebeispiele bereitgestellt. Mit der Funktion isinstance() wird ermittelt, ob ein Objekt eine Instanz einer bestimmten Klasse oder eines bestimmten Typs ist. Die Syntax dieser Funktion ist wie folgt
Einführung in Python-Funktionen: Verwendung und Beispiele der abs-Funktion
Nov 03, 2023 pm 12:05 PM
Einführung in Python-Funktionen: Verwendung und Beispiele der abs-Funktion 1. Einführung in die Verwendung der abs-Funktion In Python ist die abs-Funktion eine integrierte Funktion, die zur Berechnung des Absolutwerts eines bestimmten Werts verwendet wird. Es kann ein numerisches Argument akzeptieren und den absoluten Wert dieser Zahl zurückgeben. Die grundlegende Syntax der abs-Funktion lautet wie folgt: abs(x) wobei x der numerische Parameter zur Berechnung des Absolutwerts ist, der eine Ganzzahl oder eine Gleitkommazahl sein kann. 2. Beispiele für die abs-Funktion Im Folgenden zeigen wir die Verwendung der abs-Funktion anhand einiger spezifischer Beispiele: Beispiel 1: Berechnung
Winkelkomponenten und ihre Anzeigeeigenschaften: Nicht-Block-Standardwerte verstehen
Mar 15, 2024 pm 04:51 PM
Das Standardanzeigeverhalten für Komponenten im Angular-Framework gilt nicht für Elemente auf Blockebene. Diese Designwahl fördert die Kapselung von Komponentenstilen und ermutigt Entwickler, bewusst zu definieren, wie jede Komponente angezeigt wird. Durch explizites Festlegen der CSS-Eigenschaft display kann die Anzeige von Angular-Komponenten vollständig gesteuert werden, um das gewünschte Layout und die gewünschte Reaktionsfähigkeit zu erreichen.
Interviewer: Der Unterschied zwischen @Configuration und @Component
Aug 15, 2023 pm 04:29 PM
Der Aufruf der annotierten Methode @Bean in der Klasse @Configuration gibt das gleiche Beispiel zurück; der Aufruf der annotierten Methode @Bean in der Klasse @Component gibt eine neue Instanz zurück.
