Inhaltsverzeichnis
Was ist Änderungsüberwachung?
Die Quelle der Änderungsüberwachung
Ereignisse: Klicken/Hover/...
XHR/webSocket
Zeiten: setTimeout/requestAnimationFrame
Zusammenfassung
Verarbeitungsmechanismus für die Änderungsüberwachung
Zum Beispiel
Änderungsüberwachungsstrategie
变化监测类 - ChangeDetectorRef
Heim Web-Frontend js-Tutorial Angular Development Practice (5): Eingehende Analyse der Änderungsüberwachung

Angular Development Practice (5): Eingehende Analyse der Änderungsüberwachung

Apr 02, 2018 pm 03:03 PM
angular geh tief 解析

Was ist Änderungsüberwachung?

Bei der Entwicklung mit Angular verwenden wir häufig die Bindung in Angular – Eingabebindung von Modell zu Ansicht, Ausgabebindung von Ansicht zu Modell und Bindung zwischen Ansicht und Modell. Zwei-Wege-Bindung. Der Grund, warum diese Grenzwerte zwischen der Ansicht und dem Modell synchronisiert werden können, liegt in der Änderungserkennung in Angular.

Um es einfach auszudrücken: Die Änderungserkennung wird von Angular verwendet, um zu erkennen, ob sich die zwischen der Ansicht und dem Modell gebundenen Werte geändert haben. Es wird mit der Ansicht synchronisiert. Wenn dagegen festgestellt wird, dass sich der gebundene Wert in der Ansicht ändert, wird die entsprechende Bindungsfunktion zurückgerufen.

Die Quelle der Änderungsüberwachung

Der Schlüssel zur Änderungsüberwachung besteht darin, zu überwachen, ob sich die Grenzwerte auf kleinster Ebene geändert haben und unter welchen Umständen diese Grenzwerte auftreten Wolltuch wechseln? Wir können uns mehrere häufig verwendete Szenarien ansehen:

Ereignisse: Klicken/Hover/...

@Component({
  selector: 'demo-component',
  template: `
    <h1>{{name}}</h1>
    <button (click)="changeName()">change name</button>
  `
})
export class DemoComponent {
    name: string = &#39;Tom&#39;;
    
    changeName() {
        this.name = &#39;Jerry&#39;;
    }
}
Nach dem Login kopieren

Wir binden das Namensattribut in der Vorlage durch Interpolationsausdrücke. Wenn auf change name按钮 geklickt wird, wird der Wert des Namensattributs geändert und der in der Vorlagenansicht angezeigte Inhalt ändert sich ebenfalls.

XHR/webSocket

@Component({
  selector: &#39;demo-component&#39;,
  template: `
    <h1>{{name}}</h1>
  `
})
export class DemoComponent implements OnInit {
    name: string = &#39;Tom&#39;;
    
    constructor(public http: HttpClient) {}
    
    ngOnInit() {
        // 假设有这个./getNewName请求,返回一个新值&#39;Jerry&#39;
        this.http.get(&#39;./getNewName&#39;).subscribe((data: string) => {
            this.name = data;
        });
    }
}
Nach dem Login kopieren

Wir haben in der ngOnInit-Funktion dieser Komponente eine Ajax-Anfrage an den Server gesendet. Wenn diese Anfrage das Ergebnis zurückgibt, ändert sie auch die Bindung auf der aktuellen Vorlagenansicht. Der Wert des angegebenen Namensattributs.

Zeiten: setTimeout/requestAnimationFrame

@Component({
  selector: &#39;demo-component&#39;,
  template: `
    <h1>{{name}}</h1>
  `
})
export class DemoComponent implements OnInit {
    name: string = &#39;Tom&#39;;
    
    constructor() {}
    
    ngOnInit() {
        // 假设有这个./getNewName请求,返回一个新值&#39;Jerry&#39;
        setTimeout(() => {
            this.name = &#39;Jerry&#39;;
        }, 1000);
    }
}
Nach dem Login kopieren

Wir legen eine geplante Aufgabe in der ngOnInit-Funktion dieser Komponente fest. Wenn die geplante Aufgabe ausgeführt wird, ändert sie auch die Bindung für die aktuelle Ansicht . Der Wert des Namensattributs.

Zusammenfassung

  • Tatsächlich ist es nicht schwer festzustellen, dass die oben genannten drei Situationen eines gemeinsam haben, nämlich diese Ereignisse, die den verbindlichen Wert verursachen Änderungen erfolgen alle asynchron.

  • Angular erfasst keine Änderungen an Objekten. Es verwendet das entsprechende Timing, um zu überprüfen, ob sich der Wert des Objekts geändert hat. Dieses Timing ist das Auftreten dieser asynchronen Ereignisse.

  • Dieses Timing wird vom NgZone-Dienst gesteuert. Er ruft den Ausführungskontext der gesamten Anwendung ab und kann das Auftreten, den Abschluss oder die Ausnahme verwandter asynchroner Ereignisse erfassen und dann die Angular-Implementierung steuern Änderungsüberwachungsmechanismus.

Verarbeitungsmechanismus für die Änderungsüberwachung

Durch die obige Einführung verstehen wir ungefähr, wie die Änderungserkennung ausgelöst wird und wie dann die Änderungsüberwachung in Angular durchgeführt wird. Wolltuch?

Zunächst müssen wir wissen, dass es für jede Komponente einen entsprechenden Änderungsmonitor gibt, das heißt, jede Komponente entspricht einem changeDetector, den wir durch Abhängigkeitsinjektion in der Komponente erhalten können . changeDetector.

Und unsere mehreren Komponenten sind in einer Baumstruktur organisiert. Da eine Komponente einem changeDetector entspricht, sind auch die changeDetectors in einer Baumstruktur organisiert.

Das Letzte, woran wir denken müssen, ist, dass jede Änderungserkennung an der Wurzel des Komponentenbaums beginnt.

Zum Beispiel

Untergeordnete Komponente:

@Component({
  selector: &#39;demo-child&#39;,
  template: `
    <h1>{{title}}</h1>
    <p>{{paramOne}}</p>
    <p>{{paramTwo}}</p>
  `
})
export class DemoChildComponent {
    title: string = &#39;子组件标题&#39;;
    @Input() paramOne: any; // 输入属性1
    @Input() paramTwo: any; // 输入属性2
}
Nach dem Login kopieren

Übergeordnete Komponente:

@Component({
  selector: &#39;demo-parent&#39;,
  template: `
    <h1>{{title}}</h1>
    <demo-child [paramOne]=&#39;paramOneVal&#39; [paramTwo]=&#39;paramTwoVal&#39;></demo-child>
    <button (click)="changeVal()">change name</button>
  `
})
export class DemoParentComponent {
    title: string = &#39;父组件标题&#39;;
    paramOneVal: any = &#39;传递给paramOne的数据&#39;;
    paramTwoVal: any = &#39;传递给paramTwo的数据&#39;;
    
    changeVal() {
        this.paramOneVal = &#39;改变之后的传递给paramOne的数据&#39;;
    }
}
Nach dem Login kopieren

Im obigen Code übergibt DemoParentComponent ist in DemoChildComponent eingebettet. Aus Sicht der Baumstruktur ist DemoParentComponent der Stammknoten von DemoChildComponent und DemoChildComponent der Blattknoten von DemoParentComponent.

Wenn wir auf die Schaltfläche von DemoParentComponent klicken, wird die Methode „changeVal“ zurückgerufen und dann die Ausführung der Änderungsüberwachung ausgelöst. Der Änderungsüberwachungsprozess ist wie folgt:

Zuerst beginnt die Änderungserkennung bei DemoParentComponent Start:

  • Erkennen Sie, ob sich der Titelwert geändert hat: Es ist keine Änderung aufgetreten

  • Erkennen Sie, ob sich der paramOneVal-Wert geändert hat: Es hat eine Änderung stattgefunden (klicken Sie auf die Schaltfläche, um die zu ändernde Methode changeVal() aufzurufen)

  • Erkennen Sie, ob sich der paramTwoVal-Wert geändert hat: Es ist keine Änderung aufgetreten

Dann tritt die Änderungserkennung in den Blattknoten DemoChildComponent ein:

  • Erkennen Sie, ob sich der Titelwert geändert hat: Es ist keine Änderung aufgetreten

  • Erkennen Sie, ob sich paramOne geändert hat: Es hat sich geändert (aufgrund von Das Attribut paramOneVal der übergeordneten Komponente hat sich geändert)

  • Erkennen Sie, ob sich paramTwo geändert hat: keine Änderung ist aufgetreten

Schließlich, weil DemoChildComponent nicht mehr vorhanden ist Es gibt Blattknoten, sodass die Änderungsüberwachung das DOM aktualisiert und Änderungen zwischen der Ansicht und dem Modell synchronisiert.

Änderungsüberwachungsstrategie

Nachdem Sie den Verarbeitungsmechanismus der Änderungsüberwachung kennengelernt haben, denken Sie vielleicht, dass dieser Mechanismus etwas zu einfach und grob ist. Wenn meine Anwendung Hunderte oder Tausende von Dateien enthält. Wenn eine Komponente eine Überwachung auslöst, muss sie vom Wurzelknoten bis zum Blattknoten erneut erkannt werden.

Keine Sorge, das Entwicklungsteam von Angular hat dieses Problem bereits berücksichtigt. Angular bietet auch einen OnPush-Erkennungsmechanismus (stellen Sie das Metadatenattribut „changeDetection“ ein: ChangeDetectionStrategy.OnPush). ).

OnPush 与 Default 之间的差别:当检测到与子组件输入绑定的值没有发生改变时,变化检测就不会深入到子组件中去

变化监测类 - ChangeDetectorRef

上面说到我们可以修改组件元数据属性 changeDetection 来修改组件的变化监测策略(ChangeDetectionStrategy.Default 或 ChangeDetectionStrategy.OnPush),除了这个,我们还可以使用 ChangeDetectorRef 来更加灵活的控制组件的变化监测。

Angular 在整个运行期间都会为每一个组件创建 ChangeDetectorRef 的实例,该实例提供了相关方法来手动管理变化监测。有了这个类,我们自己就可以自定义组件的变化监测策略了,如停止/启用变化监测或者按指定路径变化监测等等。

相关方法如下:

  • markForCheck():把根组件到该组件之间的这条路径标记起来,通知Angular在下次触发变化监测时必须检查这条路径上的组件。

  • detach():从变化监测树中分离变化监测器,该组件的变化监测器将不再执行变化监测,除非再次手动执行reattach()方法。

  • reattach():把分离的变化监测器重新安装上,使得该组件及其子组件都能执行变化监测。

  • detectChanges():手动触发执行该组件到各个子组件的一次变化监测。

使用方法也很简单,直接在组件中注入即可:

@Component({
  selector: &#39;demo-parent&#39;,
  template: `
    <h1>{{title}}</h1>
  `
})
export class DemoParentComponent implements OnInit {
    title: string = &#39;组件标题&#39;;
    
    constructor(public cdRef: ChangeDetectorRef) {}
    
    ngOnInit() {
        this.cdRef.detach(); // 停止组件的变化监测,看需求使用不同的方法
    }
}
Nach dem Login kopieren

相关推荐:

Angular开发实践(四):组件之间的交互

Angular开发实践(二):HRM运行机制

         

Das obige ist der detaillierte Inhalt vonAngular Development Practice (5): Eingehende Analyse der Änderungsüberwachung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Ein tiefer Einblick in die Bedeutung und Verwendung des HTTP-Statuscodes 460 Ein tiefer Einblick in die Bedeutung und Verwendung des HTTP-Statuscodes 460 Feb 18, 2024 pm 08:29 PM

Eingehende Analyse der Rolle und Anwendungsszenarien des HTTP-Statuscodes 460. Der HTTP-Statuscode ist ein sehr wichtiger Teil der Webentwicklung und wird verwendet, um den Kommunikationsstatus zwischen Client und Server anzuzeigen. Unter diesen ist der HTTP-Statuscode 460 ein relativ spezieller Statuscode. In diesem Artikel werden seine Rolle und Anwendungsszenarien eingehend analysiert. Definition des HTTP-Statuscodes 460 Die spezifische Definition des HTTP-Statuscodes 460 lautet „ClientClosedRequest“, was bedeutet, dass der Client die Anfrage schließt. Dieser Statuscode wird hauptsächlich zur Anzeige verwendet

iBatis und MyBatis: Vergleich und Vorteilsanalyse iBatis und MyBatis: Vergleich und Vorteilsanalyse Feb 18, 2024 pm 01:53 PM

iBatis und MyBatis: Analyse der Unterschiede und Vorteile Einführung: In der Java-Entwicklung ist Persistenz eine häufige Anforderung, und iBatis und MyBatis sind zwei weit verbreitete Persistenz-Frameworks. Obwohl sie viele Gemeinsamkeiten aufweisen, gibt es auch einige wesentliche Unterschiede und Vorteile. Dieser Artikel vermittelt den Lesern ein umfassenderes Verständnis durch eine detaillierte Analyse der Funktionen, der Verwendung und des Beispielcodes dieser beiden Frameworks. 1. iBatis-Funktionen: iBatis ist ein älteres Persistenz-Framework, das SQL-Zuordnungsdateien verwendet.

Ausführliche Erklärung des Oracle-Fehlers 3114: So beheben Sie ihn schnell Ausführliche Erklärung des Oracle-Fehlers 3114: So beheben Sie ihn schnell Mar 08, 2024 pm 02:42 PM

Ausführliche Erklärung des Oracle-Fehlers 3114: Um ihn schnell zu beheben, sind spezifische Codebeispiele erforderlich. Bei der Entwicklung und Verwaltung von Oracle-Datenbanken stoßen wir häufig auf verschiedene Fehler, unter denen Fehler 3114 ein relativ häufiges Problem ist. Fehler 3114 weist normalerweise auf ein Problem mit der Datenbankverbindung hin, das durch einen Netzwerkfehler, einen Stopp des Datenbankdienstes oder falsche Einstellungen der Verbindungszeichenfolge verursacht werden kann. In diesem Artikel wird die Ursache des Fehlers 3114 ausführlich erläutert und wie dieses Problem schnell gelöst werden kann. Außerdem wird der spezifische Code angehängt

So installieren Sie Angular unter Ubuntu 24.04 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

Parsing Wormhole NTT: ein offenes Framework für jedes Token Parsing Wormhole NTT: ein offenes Framework für jedes Token Mar 05, 2024 pm 12:46 PM

Wormhole ist führend in der Blockchain-Interoperabilität und konzentriert sich auf die Schaffung robuster, zukunftssicherer dezentraler Systeme, bei denen Eigentum, Kontrolle und erlaubnislose Innovation im Vordergrund stehen. Die Grundlage dieser Vision ist das Bekenntnis zu technischem Fachwissen, ethischen Grundsätzen und Community-Ausrichtung, um die Interoperabilitätslandschaft mit Einfachheit, Klarheit und einer breiten Palette von Multi-Chain-Lösungen neu zu definieren. Mit dem Aufkommen wissensfreier Nachweise, Skalierungslösungen und funktionsreicher Token-Standards werden Blockchains immer leistungsfähiger und Interoperabilität wird immer wichtiger. In dieser innovativen Anwendungsumgebung eröffnen neuartige Governance-Systeme und praktische Funktionen beispiellose Möglichkeiten für Assets im gesamten Netzwerk. Protokollentwickler setzen sich nun mit der Frage auseinander, wie sie in dieser aufstrebenden Multi-Chain agieren sollen

Analyse der Bedeutung und Verwendung von Midpoint in PHP Analyse der Bedeutung und Verwendung von Midpoint in PHP Mar 27, 2024 pm 08:57 PM

[Analyse der Bedeutung und Verwendung von Mittelpunkt in PHP] In PHP ist Mittelpunkt (.) ein häufig verwendeter Operator, der zum Verbinden zweier Zeichenfolgen oder Eigenschaften oder Methoden von Objekten verwendet wird. In diesem Artikel befassen wir uns eingehend mit der Bedeutung und Verwendung von Mittelpunkten in PHP und veranschaulichen sie anhand konkreter Codebeispiele. 1. String-Mittelpunkt-Operator verbinden Die häufigste Verwendung in PHP ist das Verbinden zweier Strings. Indem Sie . zwischen zwei Saiten platzieren, können Sie diese zu einer neuen Saite zusammenfügen. $string1=&qu

Winkelkomponenten und ihre Anzeigeeigenschaften: Nicht-Block-Standardwerte verstehen 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.

Analyse der neuen Funktionen von Win11: So überspringen Sie die Anmeldung bei einem Microsoft-Konto Analyse der neuen Funktionen von Win11: So überspringen Sie die Anmeldung bei einem Microsoft-Konto Mar 27, 2024 pm 05:24 PM

Analyse der neuen Funktionen von Win11: So überspringen Sie die Anmeldung bei einem Microsoft-Konto. Mit der Veröffentlichung von Windows 11 haben viele Benutzer festgestellt, dass es mehr Komfort und neue Funktionen bietet. Einige Benutzer möchten jedoch möglicherweise nicht, dass ihr System an ein Microsoft-Konto gebunden ist, und möchten diesen Schritt überspringen. In diesem Artikel werden einige Methoden vorgestellt, mit denen Benutzer die Anmeldung bei einem Microsoft-Konto in Windows 11 überspringen können, um ein privateres und autonomeres Erlebnis zu erreichen. Lassen Sie uns zunächst verstehen, warum einige Benutzer zögern, sich bei ihrem Microsoft-Konto anzumelden. Einerseits befürchten einige Benutzer, dass sie

See all articles