30 seconds of angular
1.0.0
مجموعة منسحة من المقتطفات الزاوية المفيدة التي يمكنك فهمها في 30 ثانية أو أقل.
مقتطفات المبتدئين
قصاصات وسيطة
قصاصات متقدمة
التعدادات رائعة لكنها غير مرئية في القوالب الزاوية افتراضيًا. مع هذه الخدعة الصغيرة ، يمكنك جعلها في متناول الجميع.
enum Animals {
DOG ,
CAT ,
DOLPHIN
}
@ Component ( {
...
} )
export class AppComponent {
animalsEnum : typeof Animals = Animals ;
}
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: قوالب التعداد
تحقق من ورقة الغش الزاوية أو (إصدار بديل) تحتوي على الكثير من المعلومات المفيدة المكثفة في مكان واحد.
كما أن قائمة المراجعة الزاوية تحتوي على قائمة من الأخطاء الشائعة التي ارتكبت عند تطوير التطبيقات الزاوية.
https://malcoded.com/angular-cheat-yet/،https://angular.io/guide/cheatsheet،https://angular.io/guide/styleguide
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: ورقة غش نصيحة
تصحيح حالة المكون في وحدة التحكم في المستعرض عن طريق التشغيل:
ng . probe ( $0 ) . componentInstance
$0- هي عقدة DOM التي تم تحديدها حاليًا في أدوات DEV ($1للذات السابقة وما إلى ذلك).
مع محرك العارض اللبلاب:
ng . getComponent ( $0 ) https://blog.angularEndepth.com/everything-you-need-to-know-about-abugging-angular-applications-d308ed8a51b4
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: نصائح جيدة للتعرف
إذا كنت تستخدم قيمة ViewEncapsulation التي تختلف عن الافتراضي ، فقد يكون من الصعب تعيين القيمة يدويًا لكل مكون.
لحسن الحظ ، يمكنك تكوينه على مستوى العالم عند bootstrapping تطبيقك:
platformBrowserDynamic ( ) . bootstrapModule ( AppModule , [
{
// NOTE: Use ViewEncapsulation.None only if you know what you're doing.
defaultEncapsulation : ViewEncapsulation . None
}
] ) ;
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: تصميم التكوين
للعمل على الضربات الفنية والمقالي والقرص وكذلك الإيماءات المحمولة الأخرى ، يمكنك استخدام hammerjs مع زخرفة HostListener ، أو ملزمة للحدث ،
npm install hammerjs@ HostListener ( 'swiperight' )
public swiperight ( ) : void {
// Run code when a user swipes to the right
} فيما يلي عينات حول كيفية استخدام جميع روابط الأحداث hammerjs ، يمكنك استخدام هذه الأحداث مع HostListener أيضًا:
<!-- 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/doms/hammer_gestures.ts.http://hammerjs.github.io/api/#hammer.manager ،
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: إيماءات مكونات نصائح جيدة
يمكنك إنشاء مكون المساعد الخاص واستخدامه بدلاً من *ngIf .
@ 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 ;
}لمثال الاستخدام:
< loader [loading] =" isLoading " > ? ? ? </ loader >لاحظ أنه سيتم تقييم المحتوى بفارغ الصبر ، على سبيل المثال ، سيتم إنشاء
destroy-the-worldقبل بدء التحميل:
< loader [loading] =" isLoading " > < destroy-the-world > </ destroy-the-world > </ loader > https://medium.com/claritydesignsystem/ng-content-the--hidden-docs-96a29d70d11b،https://blog.angularepth.com/https-medium-thomasburleson-animated-ghosts-bfc045a51fba
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: قوالب مكونات جيدة التعرف على المعرفة
مع ng-content يمكنك تمرير أي عناصر إلى مكون. هذا يبسط إنشاء مكونات قابلة لإعادة الاستخدام.
@ 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
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: مكونات نصائح جيدة المعرفة
*ngIf التوجيه يدعم أيضا بيان else .
< div *ngIf =" isLoading; else notLoading " > loading... </ div >
< ng-template #notLoading > not loading </ ng-template >
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: قوالب NGIF
انتقل مع المصفوفة المعلمات:
سوف ينتقل جهاز التوجيه إلى /first;name=foo/details
< a [routerLink] =" ['/', 'first', {name: 'foo'}, 'details'] " >
link with params
</ a > https://stackblitz.com/edit/angular-xvy5pd
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: التوجيه
في بعض الحالات ، يمكن تسمية خصائص @Input و @Output بشكل مختلف عن المدخلات والمخرجات الفعلية.
< div
pagination
paginationShowFirst =" true "
(paginationPageChanged) =" onPageChanged($event) " >
</ div > @ Directive ( { selector : '[pagination]' } )
class PaginationComponent {
@ Input ( 'paginationShowFirst' )
showFirst : boolean = true ;
@ Output ( 'paginationPageChanged' )
pageChanged = new EventEmitter ( ) ;
}ملاحظة: استخدم هذا بحكمة ، راجع تصدير StyleGuide
https://angular.io/guide/styleguide#style-05-13
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: قوالب المكونات
يساعد مشغل الملاحة الآمن في منع استثناءات المرجع الفارغ في تعبيرات قالب المكون. يقوم بإرجاع قيمة خاصية الكائن إذا كانت موجودة أو لاغية خلاف ذلك.
< p > I will work even if student is null or undefined: {{student?.name}} </ p >{{a?.b?.c}} سيتم تجميع تحت.
(_co.a == null)? null: ((_co.a.b == null)? null: _co.a.b.c));الزاوي/الزاوي#791
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: نصائح معالجة خاصية الكائنات جيدة لمعرفة
لتجنب العمليات باهظة الثمن ، يمكننا مساعدة Angular على تتبع العناصر التي تمت إضافتها أو إزالتها ، أي تخصيص خوارزمية التتبع الافتراضية من خلال توفير خيار TrackBy إلى ngforof.
حتى تتمكن من توفير وظيفة TrackBy المخصصة التي سترجع معرفًا فريدًا لكل عنصر متكرر. على سبيل المثال ، بعض القيمة الرئيسية للعنصر. إذا كانت هذه القيمة الرئيسية تتطابق مع القيمة السابقة ، فلن يكتشف Angular التغييرات.
TrackBy يأخذ وظيفة لديها الفهرس والبند args.
@ 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 ;
}
}إذا تم إعطاء TrackBy ، فإن المسارات الزاوية تتغير حسب قيمة إرجاع الوظيفة.
الآن عند تغيير المجموعة ، يمكن لـ Angular تتبع العناصر التي تمت إضافتها أو إزالتها وفقًا للمعرف الفريد وإنشاء/تدمير العناصر التي تم تغييرها فقط.
https://angular.io/api/common/ngforof،https://angular.io/api/core/trackbyfunction
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: أداء مكونات نصائح جيدة
تحت غطاء محرك السيارة يجمع التوجيهات الهيكلية في عناصر ng-template ، على سبيل المثال:
<!-- 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 >تتم كتابة القيمة التي تم تمريرها إلى توجيه *ngfor باستخدام microsyntax. يمكنك معرفة ذلك في المستندات.
تحقق أيضًا من أداة تفاعلية تُظهر التوسع الذي قام به Alexey Zuev
https://angular.io/guide/structural-directives#microsyntax،https://alexzuza.github.io/ng-tructural-directive-expander/،https://angular.io/guide/structural-directives#inside-ngfor
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: نصيحة التوجيه الهيكلي microsyntax
في بعض الأحيان نحتاج إلى العمل مع كل عنصر تحكم واحد هو شكل. إليك كيفية القيام بذلك:
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 ;
}للحصول على أمثلة استخدام:
// 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
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: نماذج تفاعلية نصائح جيدة لمعرفة
من السهل حقًا إضافة اختصارات لوحة المفاتيح في القالب:
< 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-keydown-events
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: نصائح جيدة للتعرف
يتم لف كل مكون زاوي المقدم في عنصر مضيف (وهو نفس محدد المكون).
من الممكن ربط الخصائص وسمات العنصر المضيف باستخدام decorators hostbinding ، على سبيل المثال
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' ;
}
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: المكونات
بشكل عام ، نحصل على مثيل خدمة واحد لكل التطبيق بأكمله. من الممكن أيضًا إنشاء مثيل للخدمة لكل مكون أو توجيه.
@ 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 injected#component-level-injectors،https://stackblitz.com/edit/angular-cdk-happy-animals
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: نصائح مكونات الحقن التبعية
من الممكن إضافة مستمعي الأحداث العالميين في مكوناتك/التوجيهات الخاصة بك مع HostListener . سوف يعتني Angular بإلغاء الاشتراك بمجرد تدمير التوجيه الخاص بك.
@ Directive ( {
selector : '[rightClicker]'
} )
export class ShortcutsDirective {
@ HostListener ( 'window:keydown.ArrowRight' )
doImportantThings ( ) {
console . log ( 'You pressed right' ) ;
}
}يمكنك الحصول على روابط متعددة:
@ HostListener ( 'window:keydown.ArrowRight' )
@ HostListener ( 'window:keydown.PageDown' )
next ( ) {
console . log ( 'Next' )
}يمكنك أيضًا تمرير المعلمات:
@ HostListener ( 'window:keydown.ArrowRight' , '$event.target' )
next ( target ) {
console . log ( 'Pressed right on this element: ' + target )
}
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: مكونات الأحداث
في بعض الأحيان تحتاج إلى الوصول إلى document العالمي.
لتبسيط اختبار الوحدة ، يوفرها Angular من خلال حقن التبعية:
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
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: حقن التبعية
فيما يلي طريقة لإخطار المستخدم بوجود حقول ذات قيم غير هالية.
وظيفة markFieldsAsTouched formgroup أو formarray كوسيطة.
function markFieldsAsTouched ( form : AbstractControl ) : void {
form . markAsTouched ( { onlySelf : true } ) ;
if ( form instanceof FormArray || form instanceof FormGroup ) {
Object . values ( form . controls ) . forEach ( markFieldsAsTouched ) ;
}
}من المفيد جدًا التحقق من المزيد من الأسلوب العام للوصول إلى جميع عناصر التحكم في النماذج المتداخلة من قبل TheKiba للعمل مع عناصر التحكم.
https://angular.io/guide/reactive-forms
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: النماذج التفاعلية نصائح التحقق من صحة جيدة لمعرفة
EventEmitters المستخدمة لـ @Output هي مجرد ملاحظات مع طريقة الانبعاث.
هذا يعني أنه يمكنك فقط استخدام مثيل Observable بدلاً من ذلك ، على سبيل المثال ، يمكننا توصيل قيمة FormControl مباشرة:
readonly checkbox = new FormControl ( ) ;
@ Output ( ) readonly change = this . checkbox . valueChanges ;
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: مخرجات نصيحة
من الممكن أن تأخذ قالبًا كـ @Input لمكون لتخصيص العرض
@ 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 >ملاحظة: يجب استخدام
ng-contentلمعظم الحالات وأنه أكثر بساطة وأكثر تعريفية. استخدم هذا النهج فقط إذا كنت بحاجة إلى مرونة إضافية لا يمكن تحقيقها باستخدام NG-Content.
https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateOutlet
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: قالب
بشكل افتراضي الشرائط الزاوية جميع المساحات البيضاء في القوالب لحفظ البايتات. بشكل عام ، إنه آمن.
لحالات نادرة عندما تحتاج إلى الحفاظ على المساحات ، يمكنك استخدام سمة ngPreserveWhitespaces الخاصة:
< div ngPreserveWhitespaces >
(___()'`;
/, /`
jgs \"--\
</ div >يمكنك أيضًا استخدام خيار PreserWeTeSpaces على مكون.
https://twitter.com/mgechev/status/1108913389277839360
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: نصيحة
على الرغم من أن أفضل طريقة لإعادة استخدام التعليمات البرمجية الخاصة بك هي إنشاء مكون ، إلا أنه من الممكن أيضًا القيام بذلك في قالب.
للقيام بذلك ، يمكنك استخدام ng-template جنبًا إلى جنب مع توجيه *ngTemplateOutlet .
< 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/strutural-directives#the-ng-template
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: قوالب
إذا كنت بحاجة إلى pipe مخصص ، قبل إنشاء واحد ، فكر في التحقق من حزمة NGX Pipes التي تضم أكثر من 70+ أنابيب مخصصة بالفعل.
فيما يلي بعض الأمثلة:
< 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
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: مكتبة أنابيب تلميح
يمكنك استخدام روابط الممتلكات المتقدمة لضبط قيم نمط محددة استنادًا إلى قيم خاصية المكون:
< 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 >
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: الأنماط
على غرار كيف يمكنك ربط ثنائية الاتجاه [(ngModel)] يمكنك ربط خاصية مخصصة في اتجاهين على مكون ، على سبيل المثال [(value)] . للقيام بذلك ، استخدم تسمية الإدخال/الإخراج المناسبة:
@ Component ( {
selector : 'super-input' ,
template : `...` ,
} )
export class AppComponent {
@ Input ( ) value : string ;
@ Output ( ) valueChange = new EventEmitter < string > ( ) ;
}ثم يمكنك استخدامه على النحو التالي:
< super-input [(value)] =" value " > </ super-input >
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: نصيحة الربط
من الممكن تنفيذ المهمة غير المتزامنة قبل بدء التطبيق من خلال توفير وعد إرجاع دالة باستخدام رمز APP_INITIALIZER .
@ 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
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: نصيحة
لأغراض الاختبار ، قد ترغب في حقن window.location في المكون الخاص بك. يمكنك تحقيق ذلك مع آلية InjectionToken المخصصة التي توفرها Angular.
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-angular-application-e4e838508ff،https://angular.io/guide/dependency injection
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: اختبار حقن التبعية
من الممكن استخدام @ViewChild (أيضًا @ViewChildren و @ContentChild/Children ) للاستعلام عن مكونات من أنواع مختلفة باستخدام حقن التبعية.
في المثال أدناه ، يمكننا استخدام @ViewChildren(Base) للحصول على مثيلات من Foo و Bar .
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
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: نصائح جيدة عن مكونات الحقن التبعية
يسمح لنا Angular بالتحكم في طريقة التحميل المسبق للوحدة.
هناك استراتيجيتان مقدمة من @Angular/Router : PreloadAllModules و NoPreloading . هذا الأخير ممكّن افتراضيًا ، فقط التحميل المسبق للوحدات الكسول عند الطلب.
يمكننا تجاوز هذا السلوك من خلال توفير استراتيجية التحميل المسبقة المخصصة: في المثال أدناه ، نحن نتحمل جميع الوحدات النمطية المسبقة إذا كان الاتصال جيدًا.
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
} ) ;لاحظ أن المثال أعلاه لن يكون فعالًا للغاية بالنسبة للتطبيقات الكبيرة ، حيث أنه سيتم تحريك جميع الوحدات.
https://angular.io/api/router/preloadingtrategy،https://vsavkin.com/angular-router-preloading-modules-ba3c75e424cb،https://medium.com/adrianfaci u/custom-preloading-strategy-for-angular-modules-b3b5c873681a ، https: //coryrylan.com/blog/custom-preloading-and-lazy-lazing-with-angular
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: جهاز التوجيه
من الممكن استخدام علامات SVG في المكون الزاوي الخاص بك ، لإنشاء الرسوم البيانية الجميلة والتصورات. هناك 3 أشياء تحتاج إلى معرفتها:
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>`
} )
عرض تفاعلي لهذا المقتطف | ⬆ العودة إلى الأعلى | العلامات: نصيحة SVG
