Blazor in 2020 - Teil 3 - Komponenten

1. Einführung: Hallo und willkommen in der dritten Klasse im Siri off Blazer in den Jahren 2000 und 20 jetzt, in diesem, werden wir Komponenten, Komponenten abdecken oder, wie Sie wahrscheinlich wissen, ist ein entscheidender Teil des Blazer. Jedes Blazer-Projekt wird eine Komponente haben. Höchstwahrscheinlich jetzt, in diesem Fall, wird die grundlegenden abgesetzte Komponenten servi Parameter für Komponenten abdecken. Wenn wir auch in benutzerdefinierte Ereignisse und benutzerdefinierte Bindungen für die Komponenten auf erhalten. Auf dem Weg, Ich werde Ihnen einige andere nützliche Tipps und Ratschläge zu denen kommen Bonus Jugend und das Fett weniger Ihre angefangen. 2. Grundlagen: Hallo. Und mit Lex lernen Sie, wie man eine Komponente verwendet. Jetzt wird es auf eine sehr einfache Art und Weise sein, die im Grunde ist, wie man es zeigt, wie man ein erstellt und wie man Barometer verwendet, wie man Fruchtstimmen, Barometer-Werte in einer Komponente übergibt . Nun, wenn wir uns den Laden in einem kleinen Beispiel ansehen, was wir hier haben, ist im Grunde eine aufgeräumte Vorlage. Dann haben wir Index Dot Reserve er Hauptdatei, natürlich, das ist eine Seite. Ok. Und dann haben wir Testkomponente Dot Rasierer, die eine Komponente ist jetzt eine Komponente und eine Seite. Es ist eigentlich die gleiche Art von Akte. Es ist das Gleiche. Die Tochter ist eine Akte. Wenn Sie gehen Teoh se Seiten 40 Rechtsklick darauf, können Sie gehen, um hinzufügen können Sie zu neuen Artikel rechts so gehen. Und dann erhalten wir diesen ganzen Dialog und dann wählen Sie eine Komponente zu erhöhen. Das gleiche, was für einen Seitengeist für die Komponente gilt, ist die gleiche Punktrasierdatei. Der einzige Unterschied besteht darin, dass die Komponente keine Route benötigt, OK, keine Runde benötigt. Es könnte eine Route haben. Es könnte A Es könnte eine so für Mehrzweck Verwendung haben. Okay, aber in der Regel oder Komponenten haben keine Routen. Und das ist von innen aus. Testkomponente Punkt Razor jetzt, Wie Sie sehen können, haben wir ein paar Parameter im Codeabschnitt. Wir haben Parameter. Sie haben bereits die Parameter für Seiten gesehen. Wir haben Parameter, natürlich, sehr wichtig. Und wir haben die Öffentlichkeit wie gewohnt und dann sind wir fertig. Nun, eine Sache zu beachten. Weißt du, in diesem Fall haben wir Stärken. Sie können einen beliebigen Wert für Komponenten haben. Sie können jede Art von Tauchgang passieren, die Sie wollen. Es war doppelt von Teoh. Es könnte einige Ihrer benutzerdefinierten Klasse sein. Es spielt wirklich keine Rolle. Es geht alles für ein C Sharp ist neues Problem, wenn es überhaupt. Und dann zeigen wir einfach, um zu zeigen, dass es wichtig ist in der Tat funktioniert. Nun, die Art und Weise, wie Sie die Komponente deklarieren, ist es eigentlich ziemlich einfach. Okay, also haben wir in dem Index arbeitet, wie Sie sehen können, die Komponente deklariert. Jetzt ist die Art, wie Sie das tun, so wie Sie tun würden, wenn ein html Ellemann Tagger, würden Sie sagen, einen Fall von Ihnen. Öffnen Sie es so, dann schließen Sie es. Ok? Schließen Sie es so. Und dann setzen Sie Ihre Barometer ein. Ok? Es gibt noch ein paar Dinge, aber es kann dauern, dass Sie vielleicht haben und wir werden uns die in den nächsten Vorträgen ansehen. Aber im Grunde deklarieren Sie das und dann haben Sie für Barometer Ihre Werte so durchlaufen. Sehr einfach zu machen. Sehr einfach zu tun und sehr nützlich. In der Tat. Jetzt vergessen Sie schnell zu einem Browser können Sie sehen, Materie funktioniert in der Tat. Wir haben beram wollen, dass wir eine Aufforderung haben, auch einen zu testen , aber es ist wirklich egal, jetzt, dass wir diesen Vortrag abschließen werden. 3. Benutzerdefinierte Ereignisse: Hallo In diesem Vortrag wird einen Blick auf die Ereignisse für Komponenten. nun sehr wichtig, Dies istnun sehr wichtig,da dies eine der wenigen Möglichkeiten ist, Datenfrucht vom untergeordneten Element zum übergeordneten Element zu übertragen . Dies ist noch einmal wichtig, und es ist eigentlich ziemlich einfach zu tun. Aber du musst ein paar Regeln und Dinge befolgen. Lassen Sie uns nun einen Blick auf unser kleines Beispiel werfen. Und im Lösungs-Explorer. Zuerst haben wir Ah, Bages, Sir. Nur die Index-Seite in als unsere Testkomponente, die die Komponente mit rechts Onda arbeiten. Dann haben wir ein Testmodell, also werde ich Ihnen zeigen, was Sie auch bestimmte Arten von spezifischen modellspezifischen Klassenobjekten zurückgeben können. Eine oder nur eine einfache Zeichenfolge darin oder eine Ganzzahl. Okay, also lasst uns zuerst in die Testkomponente einsteigen. Okay. So wie das. Und mal sehen, was wir hier haben. Zuallererst haben wir ein paar Knöpfe. OK, wir haben ein paar Tasten auf Klick als wir haben. OK, wir schauen uns diese später an, aber dann haben wir im Codeabschnitt, wie Sie sehen können, beginnt der Codeabschnitt genau hier. Wir haben ein paar Barometer, aber was? Dies sind seine eigenen einfachen Saiten oder Interjects oder Doubles. Dies sind Ereignisrückrufe. Okay. Ereignis-Callbacks, die tragen rechte Zeichenfolge. Oder die 2. 1 würde Testmodell tragen. Also haben wir Ereignis eins, das, das, wenn sie ausgeführt wird, wenn sie aufgerufen wird, durch Ereignis eine Zeichenfolge ein K String rechtes Ereignis ein Booker trägt, das es durch eine Zeichenfolge und dann auch ein Ereignis tragen wird . Du wirst jetzt ein Testmodell haben. Der Weg wird auf sie zugreifen, ist sehr ähnlich zu war generischen diejenigen auf Klick auf imp ERT auf Änderung . Okay, du bekommst die Argumente, die du siehst, es ist erledigt. Aber die Art und Weise, wie Sie von einem K anrufen. Aber werden Sie anrufen? Um, wenn Sie sehen können, ist dies nur ein einfaches Parameterstrukturbarometer öffentlich, dann werden Sie gesetzt. Nichts ist einfach so zugewiesen. Okay, aber wir haben keine einfache Aufgabe. Okay. Geworfen Methode genau hier, wo wir ein neues Objekt konstruieren. Unser Testmodell. Okay. Unser Testmodell konstruieren wir und dann sehen Sie, um das Ereignis auszuführen, um es aufzurufen, Sie müssen dio Ereignis zu sagen, richtig zu Ihnen gegeben und rufen Sie dann eine Senke und in den Parametern, die Sie zur Verfügung stellen. Sie stellen die Daten bereit, die Sie sie zurückrufen möchten. Sie möchten zum übergeordneten Element gehen. Das ist sehr wichtig. Okay, hier stellen Sie es zur Verfügung. Obwohl es brillant ins Gefängnis wäre. Welche Art auch immer Sie verwenden möchten, so stellen Sie ihn zur Verfügung. Und du rufst es an. Ein Senker-Fall oder eine synchrone war nein. Invoca ist nur eine Spüle aufrufen. So machen wir das. Und an diesem Punkt tritt das Ereignis richtig? Sobald es aufgerufen wurde, tritt es auf DA auf. Für die 1. 1 sind wir nur eine einfache, sehr einfache Ausführung, richtig? Hey, ein Waschbecken drauf. Klicken Sie auf rechts. Ein Waschbecken, das Gewicht. Und dann rufst du es an, richtig? Haare in das auf der Klickbühne, richtig? Genau so. Nun, wenn wir bis zum Ende gehen, erhöhen Sie Rasiermesser. Die Hauptseite. Wie Sie sehen können, haben wir eine Seite selbst Recht. Und dann haben wir ein paar Absätze. Wir haben Ereignis eins Argument. Ein Fall davon ist die Zeichenfolge, die von der Ausführung des Ereignisses ein von diesem Ereignis kommen wird, wenn wir das erste Ereignis eintritt und dann Ereignis zu Ihnen. Wir haben ein paar Argumente von unseren Objekten, die wir das auf eine andere Weise drucken . Wir haben es ging zu und dann Darm eins. Und jetzt auch, auch, einfach so. Okay, jetzt, so können Sie die Daten bekommen. Genau wie jedes normale Ereignis können Sie entweder einfach Ihre Methode ausführen. Okay, also haben wir eine Methode für das Ereignis. Eine Methode für ging eine so. Siehst du, wir haben Argumente. Saite richtig? Es datiert sich automatisch. müssen keine Argumente deklarieren. Ah, keine Parameter. Kein Alarm Ders? Nein, nichts wie dieser Fall. Du steckst das einfach rein und es wird exekutiert. Es nimmt in den Argumenten, und es weist Ereignisargument ein zu sein, das oben angezeigt wurde. Nun, die zweite Option ist, ein bisschen zu tun. Aufwändige Räumung. Okay, wir haben eine Veranstaltung, um Haare zu schreiben, sogar für uns. Und dann sehen Sie, wir haben Argumente, Auxerre wie das wieder, genau wie ein konventionelles Ereignis auf Klick auf Veränderung Show auf etwas anderes haben wir auch gewesen. Dann haben wir unseren ganzen alarmierten Ausdruck vor sich, richtig? Wir haben August, dass wir Hunde aufnehmen und dann können wir tun, was wir wollen. Die in diesem Fall, wir einfach ein Zeichen aus Eiern, so dass das Objekt könnte Sand für die in Berufung durch dieses Ereignis bekommen . Und dann ist es so in Ereignisargumente gingen zu Argumenten, okay, und dann wird es einfach so angezeigt. Wenn es nein ist, anfangs ist es anfangskein Recht. Es wird nicht alles anzeigen. Sobald Somalia in diesem Kontext existiert, erhalten wir eine Anzeige. Jetzt laufen wir es eigentlich schon auf den Brauntönen auf dem Chrom. Und ich werde darauf eingehen. Wie Sie sehen können, ist dies das ganze Arrangement von Ereignis eins. Wir sehen nichts von zwei. Wir sehen nichts. Aber wenn ich für Ereignis ein ausführe, das Sie sehen, bekomme ich meine Testzeichenfolge und führe dann aus, denn wir gingen zu mir, bekomme ich meine zwei Werte Test und 10. Jetzt würde ich vorschlagen, damit zu spielen. Ein bitteres Chester. Holen Sie sich das ganze Konzept in den Griff. Aber bleib nicht zu lange dran. Es ist ziemlich einfach zu bedienen. Denken Sie daran, dass diese Funktion tatsächlich existiert und Sie werden es ziemlich viel verwenden. Und damit werden wir mit einem Vortrag abschließen 4. Benutzerdefinierte Bindungen: Hallo. Und mit tatsächlichen werfen Sie einen Blick auf eine andere Möglichkeit, die Daten von der untergeordneten Komponente an die übergeordnete Komponente zu binden , um sie aus einer verkohlten Komponente an die übergeordnete Komponente an die übergeordnete Seite zu übergeben , was auch immer es sein mag. Okay, in diesem Fall, in dem langsamen Beispiel, haben wir Ah, ein paar Dinge. Zusätzliche Dinge. Das ist die Testkomponente. Und eine zweite Testkomponenten, die wir ein paar Testkomponenten haben, a k Und dann, natürlich, der Haupt-Indexpunkt erhöhen eine Seite. Jetzt in der Testkomponente. Wenn wir uns das zuerst ansehen, haben wir nur einen Knopfdruck. OK, ein Knopfdruck klicken. Und auf dem Klick rufen wir tatsächlich ein Ereignis auf. Okay, also haben wir einen benutzerdefinierten Event-Callback. Ok, Benutzerdefiniertes Ereignis. Wir nennen es Ereignis eins, und dann haben wir eine Zeichenfolge A K-Zeichenfolge ist die Sache, die dafür jetzt zurückgegeben wird, es wird kein einfaches Erhalten eines Arguments von einem Ereignis sein. Es wird etwas aufwändiger sein. Okay, Vielleicht ein bisschen einfacher, aber sauberer zu lesen und zu verwenden. Aber so viel zum Thema. Denk nach OK. Und dann haben wir den tatsächlichen Wert. Okay, wir haben Wert eins, also wird es vom Elternteil binden. Es wird an den Wert eins gebunden. Okay, wenn Ereignis eins eintritt, OK, also wird es auch angezeigt. Bewohnen. Wenn wir zum Indexpunktmesser gehen, gehen wir dazu. Wir können sehen, dass wir Testkomponente haben. Ok. Und dann haben wir hier im Kurden einen Wert. OK, wir haben Ali eine, die in der Eingabe angezeigt wird. Okay, es ist ah ah ah. Es hat eine Bindung mit der Eingabe als auch, so dass wir es in Haar eingeben können und es wird in der Komponente geändert werden, aber wir ändern es durch die Komponente. Es wird sich auch in der Hand ändern. Deshalb ändert sich der Input wertvoll gut, ein Fall der Art und Weise tun das. Wie Sie sehen können, haben wir Bindung. Und dann erklären wir, an welches Barometer wir binden. Und dann, was Sie erklären müssen, ist das Ereignis. Das Ereignis, auf dem es einen Fall des Geistes Sie bindet, In diesem Fall nennen wir es Wert eins, und dann wird das Ereignis Ereignis 1 genannt. Aber es gibt einen einfacheren Weg, da Sie für irgendwie einen Blick bekommen haben, dass wir eine zweite Testkomponente haben und darin darin müssen wir auch eine Senke vom Kurs aufrufen. Richtig. Und wir zeigen den Wert wieder in der Komponente an. Wir haben String-Wert eins. Aber der Unterschied hier ist, dass wir Ereignis Colback benannten Wert eins einen Fall der Variablen geändert haben. Die Zeichenfolge ist der Wert eins. Jetzt ist die Perama tive und Colback Wert eins geändert. Das ist also eine Art Schlüsselwort, wie in einem E p I, zum Beispiel, Sie hätten ah, Controller, etwas Controller Punkt CS und dann das System. Die ganze Anordnung weiß, dass es sich um eine Controller-Datei handelt. Okay, also lasst uns in den Index gehen und sehen, wie es funktioniert. Wie Sie sehen können, haben wir einen weiteren Eingang. Wir binden das an Wert zu Wert, um Haare zu schreiben. Okay, das ist für die Anzeige, und dann sehen Sie die zweite Testkomponente, wir binden einfach den Wert eins. Wir müssen das Ereignis nicht spezifizieren. Ok. Wir müssen das Ereignis nicht genau angeben. Wir können einfach den Wert eins einfach so binden. Okay, das ist also ein bisschen sauberer Weg, das zu tun. Und ich würde eigentlich vorschlagen, wenn Sie mit diesem verbindlichen Ansatz anstelle von zurückgerufenen Ereignissen gehen . Also haben wir eine Methode oder was auch immer es eine Art Aktion sein mag. Ich würde vorschlagen, Rache zu gehen, weil es eine Loft sauberer Darstellung von einer ganzen Vereinbarung ist. Sie können ganz klar sehen, was jeder beram mich tut, wo die Kühltasche gehört zu welcher Eigenschaft, die kam. Jetzt haben wir es tatsächlich laufen, okay? Und die Brauntöne in der verchromten rechten Hand. Wir haben es laufen und Sie können sehen, dass wir voll Ereignis einmal ausführen oder lassen Sie uns ah, Lizzie Cem Test. Ok. So wie das. Siehst du, ich habe es freigegeben. Froh So bindet es mit ah, Fett Eingang Eine Höhle mit dem Eingang und ah ah ah, die tatsächlich erträglich scheinbar erträglich. Okay, jetzt, wenn ich den Gedankendienst ausführe, wird er sichtbar im Oakley-Advancer aufrufen. Klicken Sie darauf. Siehst du, es verändert das Haar und es ändert sich. Richtig? Dass ein Fall jetzt die 2. 1 wir DST Wazir wie Pflanze tun können. Okay, also funktioniert es auch ganz perfekt. Und wenn ich mich ändere, ändert sich auch nicht alles. Sie sehen also, es funktioniert ganz perfekt. Es ist eine tolle Sache, Ah zu haben, es ist eine tolle Sache zu benutzen. Und wieder, wenn Sie eine Aktion haben, wenn Sie eine Aktion haben, sobald das Erträgliche an das Elternteil übergeben wird, sollten Sie wahrscheinlich bei den Ereignissen bleiben. Aber wenn Sie keine Aktion haben, wenn Sie nur einen Wert zuweisen müssen, ist das viel besser, Viel sauber eine Möglichkeit, es zu tun, und damit werden wir diesen Vortrag schließen. 5. Komponentenreferenz: Hallo in dieser Vorlesung wird einen Blick auf etwas als Komponentenreferenz oder eine Referenz oder eine raff. Nun, im Grunde, was nicht erlaubt es Ihnen, eine Sofa-Referenz fast ah zu geben, ähnlich wie ein I. D und I D in bestimmten anderen Sprachen oder Schnittstellen für C-Shop und im Grunde auf Dinge zugreifen , die in der Komponente alle Eigenschaft, so dass in dieser gesamten Komponentenanordnung sind. Also für dieses Beispiel haben wir in den Seiten vier Ordnung rechte Haare und ermahnen Rasierer und dann testen Komponente. Das war's. Das ist alles, was wir haben. Das ist es, was wir jetzt in der eigentlichen Komponente brauchen. Mal sehen, was wir haben. Ich bin gekommen. Wir haben einen Input, okay? Und dann haben wir eine Zeichenfolge angezeigt, um anzuzeigen. Jetzt ist diese, wie Sie sehen können, es ist eine private private Zeichenfolge anzuzeigen. Okay, nichts Schickes. Und dann wird es das Pestering angezeigt, aber es ist öffentlich und wir binden es an die Eingabe OK, öffentlich, und wir binden es an die Eingabe. Wir haben auch eine öffentliche Aufgaben-Methode. Wir haben eine öffentliche Aufgabenmethode, die im Wert schüttelt, um eine Zeichenfolge K anzuzeigen, die dann zugewiesen wird , um anzuzeigen. Ich kam jetzt, danach haben wir den Status. Sie haben diese Methode im Grunde hinteren Enders etwas geändert. Wenn du in einem anderen Fred arbeitest, werden wir das tiefer in ah, einem der nächsten abdecken . Abgesehen von den Vorlesungen werden wir das ganze Ding ziemlich tiefgründig färben . Aber das ist es, was du brauchst, damit das jetzt funktioniert, oder? Und dann, wenn wir in Index Dot Razor gehen, können Sie sehen. Aber wir haben, ah, Testkomponente. Und dann haben wir auch etwas altes ref, die ref und dann CMP. Nun, CMP, wie Sie sehen können, ist im Grunde eine Variable eine einfache Variable Ah, beste Komponente off Typ Schreibtisch Komponenten bei CMP. Und das ist eine Referenz, richtig? Also im Grunde CMP Province Variable, die eine Referenz gemacht hat, können Sie auf alle öffentlichen Eigenschaften von dieser Komponente zugreifen. Und das ist es, was wir tun. Wir haben eine kleine Testmethode, dieauf diesem Weg ausgeführt wird, aber auf dem Klick von auf diesem Weg ausgeführt wird, seinem Boden, rechts, und dann müssen wir anzeigen, um dich zu zeigen, dies ist wieder eine Zeichenfolge, ein Problem mit String im Indexpunkt wirft es nicht das gleiche wie eine in der Testkomponente und dann haben wir diese Testmethode, die, wie Sie sehen können, ein paar Dinge tut. Es weist die Testzeichenfolge von der Komponente zu, die Sie von der Komponente sehen. Es weist die Task-Zeichenfolge angezeigt werden und daher wird es angezeigt. Jetzt wird es auch mit Testmethode von der besten Komponente ausgeführt, und es gibt ein wenig Wortarbeit. Ich bin gekommen, damit es exekutiert, dass das hier ist, oder? Das hier. Sie sehen also, Sie können auf Eigenschaften zugreifen, um Strings und, na ja, andere Art zu sein na ja, . Sie hätten genauso gut die Methode gefragt. Also mal sehen, wie es funktioniert. Wir laufen es sofort auf Chrome. Ok. Und so sehen Sie, das ist unser Programm, das sagen, ich werde etwas am besten jetzt ausführen eingeben oder vielmehr, allem, Ich kann etwas dagegen, Lassen Sie uns Sie ausführen sehen, jetzt sagt es funktioniert und es war in der Lage, es zuzuweisen. Wir haben so wieder Test, im Grunde, was es Ihnen erlaubt, diese Referenzen zu tun, auf alle Teile der Komponente zuzugreifen, wie Sie es mit jeder normalen Klasse tun würden. Und bevor das gesagt wird, werden wir dies schließen