30 seconds of angular
1.0.0
Kuratierte Sammlung nützlicher Winkelausschnitte, die Sie in 30 Sekunden oder weniger verstehen können.
Anfängerausschnitte
Zwischenausschnitte
Fortgeschrittene Ausschnitte
Enums sind großartig, aber sie sind standardmäßig in Winkelvorlagen nicht sichtbar. Mit diesem kleinen Trick können Sie sie zugänglich machen.
enum Animals {
DOG ,
CAT ,
DOLPHIN
}
@ Component ( {
...
} )
export class AppComponent {
animalsEnum : typeof Animals = Animals ;
}
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Enums -Vorlagen
Schauen Sie sich das Angular Cheat Sheet oder (alternative Version) mit vielen nützlichen Informationen an, die an einem Ort kondensiert sind.
Auch Angular Checkliste enthält kuratierte Liste der häufigen Fehler, die bei der Entwicklung von Winkelanwendungen gemacht wurden.
https://malcoded.com/angular-teetsheet/,https://angular.io/guide/cheatsetheet,https://angular.io/guide/styleguide
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Tipps Cheat Sheet
Debuggen Sie den Komponentenstatus in der Browserkonsole durch Ausführen ein:
ng . probe ( $0 ) . componentInstance
$0- ist der DOM -Knoten, der derzeit in Dev -Tools ausgewählt wurde ($1für die vorherige und so weiter).
Mit Ivy Renderer Engine:
ng . getComponent ( $0 ) https://blog.angulardepth.com/ething-you-need-to-know-about-debugging-angular-anapplication-d308ed8a51b4
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Good-to-Know-Tipps
Wenn Sie den ViewEncapsulation -Wert verwenden, der sich als Standard unterscheidet, ist es möglicherweise entmutigend, den Wert für jede Komponente manuell festzulegen.
Zum Glück können Sie es weltweit konfigurieren, wenn Sie Ihre App starten:
platformBrowserDynamic ( ) . bootstrapModule ( AppModule , [
{
// NOTE: Use ViewEncapsulation.None only if you know what you're doing.
defaultEncapsulation : ViewEncapsulation . None
}
] ) ;
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Konfigurationsstyling
Um auf Swipes, Pfannen und Pinhces sowie auf die anderen mobilen Gesten zu reagieren, können Sie hammerjs mit HostListener -Dekorateur oder einer Ereignisbindung verwenden.
npm install hammerjs@ HostListener ( 'swiperight' )
public swiperight ( ) : void {
// Run code when a user swipes to the right
} Hier sind Muster, wie Sie alle hammerjs -Ereignisbindungen verwenden können. Sie können diese Ereignisse auch mit einem HostListener verwenden:
<!-- pan events -->
< div (pan) =" logEvent($event) " > </ div >
< div (panstart) =" logEvent($event) " > </ div >
< div (panmove) =" logEvent($event) " > </ div >
< div (panend) =" logEvent($event) " > </ div >
< div (pancancel) =" logEvent($event) " > </ div >
< div (panleft) =" logEvent($event) " > </ div >
< div (panright) =" logEvent($event) " > </ div >
< div (panup) =" logEvent($event) " > </ div >
< div (pandown) =" logEvent($event) " > </ div >
<!-- pinch events -->
< div (pinch) =" logEvent($event) " > </ div >
< div (pinchstart) =" logEvent($event) " > </ div >
< div (pinchmove) =" logEvent($event) " > </ div >
< div (pinchend) =" logEvent($event) " > </ div >
< div (pinchcancel) =" logEvent($event) " > </ div >
< div (pinchin) =" logEvent($event) " > </ div >
< div (pinchout) =" logEvent($event) " > </ div >
<!-- press events -->
< div (press) =" logEvent($event) " > </ div >
< div (pressup) =" logEvent($event) " > </ div >
<!-- rotate events -->
< div (rotate) =" logEvent($event) " > </ div >
< div (rotatestart) =" logEvent($event) " > </ div >
< div (rotatemove) =" logEvent($event) " > </ div >
< div (rotateend) =" logEvent($event) " > </ div >
< div (rotatecancel) =" logEvent($event) " > </ div >
<!-- swipe events -->
< div (swipe) =" logEvent($event) " > </ div >
< div (swipeleft) =" logEvent($event) " > </ div >
< div (swiperight) =" logEvent($event) " > </ div >
< div (swipeup) =" logEvent($event) " > </ div >
< div (swipedown) =" logEvent($event) " > </ div >
<!-- tap event -->
< div (tap) =" logEvent($event) " > </ div > https://github.com/angular/angular/blob/master/packages/platform-browser/src/dom/events/hammer_gestures.ts,http:/.hammerjs.github.io/api/#hammer.Manager,https
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Good-to-Know-Tipps-Komponenten Gesten
Sie können eigene Helferkomponente erstellen und anstelle von *ngIf verwenden.
@ Component ( {
selector : 'loader' ,
template : `
<ng-content *ngIf="!loading else showLoader"></ng-content>
<ng-template #showLoader>? Wait 10 seconds!</ng-template>
`
} )
class LoaderComponent {
@ Input ( ) loading : boolean ;
}Für Nutzungsbeispiel:
< loader [loading] =" isLoading " > ? ? ? </ loader >Beachten Sie, dass der Inhalt eifrig bewertet wird, z. B. im Snippet unten
destroy-the-worldwird erstellt, bevor das Laden überhaupt beginnt:
< loader [loading] =" isLoading " > < destroy-the-world > </ destroy-the-world > </ loader > https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b,https://blog.angulardepth.com/https-medium-com-thomasburleson-animated-ghosts-bfc0451fbafba
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Tipps Good-to-Know-Komponentenvorlagen
Mit ng-content können Sie alle Elemente an eine Komponente übergeben. Dies vereinfacht das Erstellen wiederverwendbarer Komponenten.
@ Component ( {
selector : 'wrapper' ,
template : `
<div class="wrapper">
<ng-content></ng-content>
</div>
` ,
} )
export class Wrapper { } < wrapper >
< h1 > Hello World! </ h1 >
</ wrapper > https://medium.com/p/96a29d70d11b
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Good-to-Know-Tipps-Komponenten
*ngIf -Richtlinie unterstützt auch Anweisungen else Angaben.
< div *ngIf =" isLoading; else notLoading " > loading... </ div >
< ng-template #notLoading > not loading </ ng-template >
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: NGIF -Vorlagen
Navigieren Sie mit Matrixparamien:
Der Router navigieren zu /first;name=foo/details
< a [routerLink] =" ['/', 'first', {name: 'foo'}, 'details'] " >
link with params
</ a > https://stackblitz.com/edit/angular-xvy5pd
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Routing
In bestimmten Fällen können @Input und @Output -Eigenschaften unterschiedlich benannt werden als die tatsächlichen Eingänge und Ausgänge.
< div
pagination
paginationShowFirst =" true "
(paginationPageChanged) =" onPageChanged($event) " >
</ div > @ Directive ( { selector : '[pagination]' } )
class PaginationComponent {
@ Input ( 'paginationShowFirst' )
showFirst : boolean = true ;
@ Output ( 'paginationPageChanged' )
pageChanged = new EventEmitter ( ) ;
}Hinweis: Verwenden Sie dies mit Bedacht, siehe StyleGuide Empfehlung
https://angular.io/guide/styleguide#style-05-13
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Komponentenvorlagen
Der sichere Navigationsoperator hilft bei der Verhinderung von Ausnahmen von Null-Referenz-Ausnahmen in Ausdrücken von Komponentenvorlagen. Es gibt den Objekteigenschaftswert zurück, wenn er existiert oder sonst null.
< p > I will work even if student is null or undefined: {{student?.name}} </ p >{{a?.b?.c}} Darunter wird zusammengestellt.
(_co.a == null)? null: ((_co.a.b == null)? null: _co.a.b.c));Angular/Winkel#791
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Tipps zur Handhabung von Objekteigenschaften gut zu wissen
Um die teuren Vorgänge zu vermeiden, können wir Angular helfen, zu verfolgen, welche Elemente hinzugefügt oder entfernt wurden, indem wir den Standard -Tracking -Algorithmus anpassen, indem sie NGForOF eine Trackby -Option bereitstellen.
So können Sie Ihre benutzerdefinierte Trackby -Funktion bereitstellen, die für jedes iterierte Element eindeutige Kennung zurückgibt. Zum Beispiel ein Schlüsselwert des Elements. Wenn dieser Schlüsselwert dem vorherigen übereinstimmt, erkennt Angular keine Änderungen.
Trackby nimmt eine Funktion mit Index- und Element -Argumenten.
@ Component ( {
selector : 'my-app' ,
template : `
<ul>
<li *ngFor="let item of items; trackBy: trackByFn">{{item.id}}</li>
</ul>
`
} )
export class AppComponent {
trackByFn ( index , item ) {
return item . id ;
}
}Wenn Trackby angegeben ist, ändert sich Winkelspuren am Rückgabewert der Funktion.
Wenn Sie nun die Sammlung ändern, kann Angular verfolgen, welche Elemente entsprechend der eindeutigen Kennung hinzugefügt oder entfernt wurden und nur geänderte Elemente erstellen/zerstören.
https://angular.io/api/common/ngforof,https://angular.io/api/core/trackbyfunction
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Good-to-Know-Tipps-Komponenten Leistung
Unter der Motorhaube kompiliert Angular Strukturrichtlinien in NG-Template-Elemente, z. B.:
<!-- This -->
< div *ngFor =" let item of [1,2,3] " >
<!-- Get expanded into this -->
< ng-template ngFor [ngForOf] =" [1,2,3] " let-item =" $implicit " > </ ng-template >Der an *ngFor -Anweisung übergebene Wert wird unter Verwendung von MicroSyntax geschrieben. Sie können in den Dokumenten darüber erfahren.
Schauen Sie sich auch ein interaktives Tool an, das die Erweiterung von Alexey Zuev zeigt
https://angular.io/guide/structural-directives#microsyntax,https://alexzuza.github.io/ng-structural-directive-expander/,https://angular.io/guide/structura-directives#innsindngfor
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Tipp Structural Directive Mikrosyntax
Manchmal müssen wir mit jeder einzelnen Kontrolle arbeiten. So kann es getan werden:
function flattenControls ( form : AbstractControl ) : AbstractControl [ ] {
let extracted : AbstractControl [ ] = [ form ] ;
if ( form instanceof FormArray || form instanceof FormGroup ) {
const children = Object . values ( form . controls ) . map ( flattenControls ) ;
extracted = extracted . concat ( ... children ) ;
}
return extracted ;
}Beispiele verwenden:
// returns all dirty abstract controls
flattenControls ( form ) . filter ( ( control ) => control . dirty ) ;
// mark all controls as touched
flattenControls ( form ) . forEach ( ( control ) =>
control . markAsTouched ( { onlySelf : true } ) ) ; https://angular.io/guide/reactive-forms
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Reaktive Formen -Tipps gut zu wissen
Es ist wirklich einfach, Tastaturverknüpfungen in der Vorlage hinzuzufügen:
< textarea (keydown.ctrl.enter) =" doSomething() " > </ textarea > < input (keydown.enter) =" ... " >
< input (keydown.a) =" ... " >
< input (keydown.esc) =" ... " >
< input (keydown.shift.esc) =" ... " >
< input (keydown.control) =" ... " >
< input (keydown.alt) =" ... " >
< input (keydown.meta) =" ... " >
< input (keydown.9) =" ... " >
< input (keydown.tab) =" ... " >
< input (keydown.backspace) =" ... " >
< input (keydown.arrowup) =" ... " >
< input (keydown.shift.arrowdown) =" ... " >
< input (keydown.shift.control.z) =" ... " >
< input (keydown.f4) =" ... " > https://alligator.io/angular/binding-keyup-ectydown-events
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Tipps Good-to-Know
Jede gerenderte Winkelkomponente ist in ein Host -Element eingewickelt (das dem Selektor der Komponente entspricht).
Es ist möglich, Eigenschaften und Attribute des Hostelements mit @hostbinding Decorators zu binden, z. B.
import { Component , HostBinding } from '@angular/core' ;
@ Component ( {
selector : 'my-app' ,
template : `
<div>Use the input below to select host background-color:</div>
<input type="color" [(ngModel)]="color">
` ,
styles : [
`:host { display: block; height: 100px; }`
]
} )
export class AppComponent {
@ HostBinding ( 'style.background' ) color = '#ff9900' ;
}
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Komponenten
Im Allgemeinen erhalten wir eine Serviceinstanz gemäß der gesamten Anwendung. Es ist auch möglich, eine Instanz des Dienstes pro Komponente oder Richtlinie zu erstellen.
@ Component ( {
selector : 'provide' ,
template : '<ng-content></ng-content>' ,
providers : [ Service ]
} )
export class ProvideComponent { } @ Directive ( {
selector : '[provide]' ,
providers : [ Service ]
} )
export class ProvideDirective { } https://angular.io/guide/hierarchical-dependency-injection#component-level-injectors ,https://stackblitz.com/edit/angular-cdk-happy-animals
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Tippskomponenten Abhängigkeitsinjektion
Mit HostListener ist es möglich, globale Ereignishörer in Ihre Komponenten/Direktiven hinzuzufügen. Angular kümmert sich um die Abmeldung, sobald Ihre Richtlinie zerstört wird.
@ Directive ( {
selector : '[rightClicker]'
} )
export class ShortcutsDirective {
@ HostListener ( 'window:keydown.ArrowRight' )
doImportantThings ( ) {
console . log ( 'You pressed right' ) ;
}
}Sie können mehrere Bindungen haben:
@ HostListener ( 'window:keydown.ArrowRight' )
@ HostListener ( 'window:keydown.PageDown' )
next ( ) {
console . log ( 'Next' )
}Sie können auch Parameter übergeben:
@ HostListener ( 'window:keydown.ArrowRight' , '$event.target' )
next ( target ) {
console . log ( 'Pressed right on this element: ' + target )
}
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Ereigniskomponenten
Manchmal müssen Sie Zugriff auf globales document erhalten.
Zur Vereinfachung der Einheitentests liefert Angular es durch Abhängigkeitsinjektion:
import { DOCUMENT } from '@angular/common' ;
import { Inject } from '@angular/core' ;
@ Component ( {
selector : 'my-app' ,
template : `<h1>Edit me </h1>`
} )
export class AppComponent {
constructor ( @ Inject ( DOCUMENT ) private document : Document ) {
// Word with document.location, or other things here....
}
} https://angular.io/api/common/document
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Abhängigkeitsinjektion
Hier ist der Weg, um den Benutzer darüber zu benachrichtigen, dass es Felder mit Nicht-Valid-Werten gibt.
markFieldsAsTouched -Funktionsgruppe oder FormArray als Argument.
function markFieldsAsTouched ( form : AbstractControl ) : void {
form . markAsTouched ( { onlySelf : true } ) ;
if ( form instanceof FormArray || form instanceof FormGroup ) {
Object . values ( form . controls ) . forEach ( markFieldsAsTouched ) ;
}
}Es ist sehr nützlich, eine allgemeinere Methode zu überprüfen, die von Thekiba auf alle verschachtelten Formularsteuerungen zugreift, um mit Kontrollen zu arbeiten.
https://angular.io/guide/reactive-forms
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Reaktive Formulare Validierungstipps Gut zu wissen
EventEmitters die für @Output verwendet werden, sind nur Observable mit einer Emit -Methode.
Dies bedeutet, dass Sie stattdessen nur Observable Instanz verwenden können, z. B. können wir FormControl -Wertänderungen direkt verdrahten:
readonly checkbox = new FormControl ( ) ;
@ Output ( ) readonly change = this . checkbox . valueChanges ;
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Tippausgänge
Es ist möglich, eine Vorlage als @Input für eine Komponente zum Anpassen des Renders zu nehmen
@ Component ( {
template : `
<nav>
<ng-container *ngTemplateOutlet="template"></ng-container>
</nav>
` ,
} )
export class SiteMenuComponent {
@ Input ( ) template : TemplateRef < any > ;
} < site-menu [template] =" menu1 " > </ site-menu >
< ng-template #menu1 >
< div > < a href =" # " > item1 </ a > </ div >
< div > < a href =" # " > item2 </ a > </ div >
</ ng-template >Hinweis: In den meisten Fällen sollte
ng-contentverwendet werden und ist einfacher und deklarativer. Verwenden Sie diesen Ansatz nur, wenn Sie zusätzliche Flexibilität benötigen, die mit NG-Incontent nicht erreicht werden kann.
https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Vorlage
Standardmäßig Winkelstreifen alle Whitespaces in Vorlagen zum Speichern von Bytes. Im Allgemeinen ist es sicher.
In seltenen Fällen, in denen Sie Räume erhalten müssen, können Sie ein spezielles Attribut ngPreserveWhitespaces verwenden:
< div ngPreserveWhitespaces >
(___()'`;
/, /`
jgs \"--\
</ div >Sie können auch die Option ConservwhiteSpaces für eine Komponente verwenden.
https://twitter.com/mgechev/status/1108913389277839360
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Tipp
Während der beste Weg, Ihren Code wiederzuverwenden, ist es auch möglich, dies in einer Vorlage zu tun.
Zu diesem Zweck können Sie ng-template zusammen mit *ngTemplateOutlet Direktive verwenden.
< p >
< ng-container *ngTemplateOutlet =" fancyGreeting " > </ ng-container >
</ p >
< button >
< ng-container *ngTemplateOutlet =" fancyGreeting " > </ ng-container >
</ button >
< ng-template #fancyGreeting >
Hello < b > {{name}}! </ b >
</ ng-template > https://angular.io/api/common/ngtemplateoutlet,https://angular.io/guide/structural-directives#the-ng-template
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Vorlagen
Wenn Sie ein benutzerdefiniertes pipe benötigen, bevor Sie eines erstellen, sollten Sie das NGX Pipes -Paket mit über 70+ bereits implementierten benutzerdefinierten Pipes überprüfen.
Hier sind einige Beispiele:
< p > {{ date | timeAgo }} </ p >
<!-- Output: "last week" -->
< p > {{ 'foo bar' | ucfirst }} </ p >
<!-- Output: "Foo bar" -->
< p > 3 {{ 'Painting' | makePluralString: 3 }} </ p >
<!-- Output: "3 Paintings" -->
< p > {{ [1, 2, 3, 1, 2, 3] | max }} </ p >
<!-- Output: "3" --> https://github.com/danrevah/ngx-pipes
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Tipp Pipes Library
Sie können erweiterte Eigenschaftsbindungen verwenden, um bestimmte Stilwerte basierend auf Komponenteneigenschaftswerten festzulegen:
< p [style.background-color] =" 'green' " >
I am in green background
</ p >
< p [style.font-size.px] =" isImportant ? '30' : '16' " >
May be important text.
</ p > <!-- Width in pixels -->
< div [style.width.px] =" pxWidth " > </ div >
<!-- Font size in percentage relative to the parent -->
< div [style.font-size.%] =" percentageSize " > ... </ div >
<!-- Height relative to the viewport height -->
< div [style.height.vh] =" vwHeight " > </ div >
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Stile
Ähnlich wie Sie bid [(ngModel)] binden können, können Sie zwei-Wege benutzerdefinierte Eigenschaft in einer Komponente binden, z. B. [(value)] . Verwenden Sie dazu eine entsprechende Eingangs-/Ausgangsnamen:
@ Component ( {
selector : 'super-input' ,
template : `...` ,
} )
export class AppComponent {
@ Input ( ) value : string ;
@ Output ( ) valueChange = new EventEmitter < string > ( ) ;
}Dann können Sie es als:
< super-input [(value)] =" value " > </ super-input >
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Tippbindung
Es ist möglich, eine asynchrone Aufgabe auszuführen, bevor die App beginnt, indem sie mit APP_INITIALIZER Token eine Funktion zurückgibt.
@ NgModule ( {
providers : [
{
provide : APP_INITIALIZER ,
useValue : functionReturningPromise
multi : true
} ,
} )
export class AppModule { }
https://hackernoon.com/hook-into-angular-initialization-process-add41a6b7e,https://angular.io/api/core/app_initializer
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Tipp
Zu den Testzwecken möchten Sie möglicherweise window.location injizieren. Sie können dies mit InjectionToken Mechanismus von Angular erreichen.
export const LOCATION_TOKEN = new InjectionToken < Location > ( 'Window location object' ) ;
@ NgModule ( {
providers : [
{ provide : LOCATION_TOKEN , useValue : window . location }
]
} )
export class SharedModule { }
//...
@ Component ( {
} )
export class AppComponent {
constructor (
@ Inject ( LOCATION_TOKEN ) public location : Location
) { }
} https://itnext.io/testing-browser-window-location-inangular-application-e4e838508ff,https://angular.io/guide/dependency-injection
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Abhängigkeitsinjektionstests
Es ist möglich, @ViewChild (auch @ViewChildren und @ContentChild/Children ) zu verwenden, um Komponenten verschiedener Typen mithilfe der Abhängigkeitsinjektion abzufragen.
Im folgenden Beispiel können wir @ViewChildren(Base) verwenden, um Instanzen von Foo und Bar zu erhalten.
abstract class Base { }
@ Component ( {
selector : 'foo' ,
providers : [ { provide : Base , useExisting : Foo } ]
} )
class Foo extends Base { }
@ Component ( {
selector : 'bar' ,
providers : [ { provide : Base , useExisting : Bar } ]
} )
class Bar extends Base { }
// Now we can require both types of components using Base.
@ Component ( { template : `<foo></foo><bar></bar>` } )
class AppComponent {
@ ViewChildren ( Base ) components : QueryList < Base > ;
} https://www.youtube.com/watch?v=prrgo6f0cjs
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Good-to-Know-Tipps-Komponenten Abhängigkeitsinjektion
Angular ermöglicht es uns, die Art und Weise zu steuern, wie das Vorladen des Moduls des Moduls behandelt wird.
Es gibt 2 Strategien von @Angular/Router : PreloadAllModules und NoPreloading . Letzteres fähig standardmäßig aktiviert und nur faulen Modulen auf Bedarf vorladen.
Wir können dieses Verhalten überschreiben, indem wir benutzerdefinierte Vorspannungsstrategien bereitstellen: Im folgenden Beispiel werden alle enthaltenen Module vorgeladen, wenn die Verbindung gut ist.
import { Observable , of } from 'rxjs' ;
export class CustomPreloading implements PreloadingStrategy {
public preload ( route : Route , load : ( ) => Observable < any > ) : Observable < any > {
return preloadingConnection ( ) ? load ( ) : of ( null ) ;
}
}
const routing : ModuleWithProviders = RouterModule . forRoot ( routes , {
preloadingStrategy : CustomPreloading
} ) ;Beachten Sie, dass das obige Beispiel für größere Apps nicht sehr effizient wäre, da es alle Module vorlädt.
https://angular.io/api/router/preloadingstrategy,https://vsavkin.com/angular-router-preloading-modules-ba3c75e424cb,https://medium.com/@adriandaci u/benutzerdefinierte Preloading-Strategy-for-angular-modules-b3b5c873681a, https: //corylan.com/blog/custom-preloading-and-lazy-loading-strategies-with-angular
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Router
Es ist möglich, SVG -Tags in Ihrer Winkelkomponente zu verwenden, um schöne Grafiken und Visualisierungen zu erstellen. Es gibt 3 Dinge, die Sie wissen müssen:
attr < circle [attr.cx] =" x " [attr.cy] =" y " > </ circle >// Not: < child-component > </ child-component >
< g child-component > </ g > @ Component ( { selector : '[child-component]' } )@ Component ( {
selector : '[child-component]' ,
template : `<svg:circle></svg:circle>`
} )
Interaktive Demo dieses Ausschnitts | ⬆ Zurück nach oben | Tags: Tipp SVG
