30 seconds of angular
1.0.0
คอลเลกชันของตัวอย่างเชิงมุมที่มีประโยชน์ที่คุณสามารถเข้าใจได้ภายใน 30 วินาทีหรือน้อยกว่า
ตัวอย่างเริ่มต้น
ตัวอย่างกลาง
ตัวอย่างขั้นสูง
enums นั้นยอดเยี่ยม แต่ไม่สามารถมองเห็นได้ในเทมเพลตเชิงมุมโดยค่าเริ่มต้น ด้วยเคล็ดลับเล็ก ๆ น้อย ๆ นี้คุณสามารถทำให้พวกเขาสามารถเข้าถึงได้
enum Animals {
DOG ,
CAT ,
DOLPHIN
}
@ Component ( {
...
} )
export class AppComponent {
animalsEnum : typeof Animals = Animals ;
}
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | แท็ก: เทมเพลต enums
ตรวจสอบแผ่นโกงเชิงมุมหรือ (เวอร์ชันทางเลือก) ที่มีข้อมูลที่เป็นประโยชน์มากมายควบแน่นในที่เดียว
รายการตรวจสอบเชิงมุมมีรายการที่รวบรวมของข้อผิดพลาดทั่วไปที่เกิดขึ้นเมื่อพัฒนาแอปพลิเคชันเชิงมุม
https://malcoded.com/angular-cheat-sef
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: เคล็ดลับชีท
ดีบักสถานะส่วนประกอบในคอนโซลเบราว์เซอร์โดยเรียกใช้:
ng . probe ( $0 ) . componentInstance
$0- เป็นโหนด DOM ที่เลือกในปัจจุบันในเครื่องมือ dev ($1สำหรับรุ่นก่อนหน้าและอื่น ๆ )
ด้วยเครื่องยนต์ Ivy Renderer:
ng . getComponent ( $0 ) https://blog.angularindepth.com/everything-you-eed-to-know-about-debugging-angular-applications-d308ed8a51b4
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: เคล็ดลับที่ดีที่รู้
หากคุณใช้ค่า ViewEncapsulation ซึ่งแตกต่างจากค่าเริ่มต้นอาจเป็นเรื่องที่น่ากลัวในการตั้งค่าด้วยตนเองสำหรับทุกองค์ประกอบ
โชคดีที่คุณสามารถกำหนดค่าทั่วโลกเมื่อ bootstrapping แอปของคุณ:
platformBrowserDynamic ( ) . bootstrapModule ( AppModule , [
{
// NOTE: Use ViewEncapsulation.None only if you know what you're doing.
defaultEncapsulation : ViewEncapsulation . None
}
] ) ;
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | แท็ก: สไตล์การกำหนดค่า
ในการดำเนินการกับ Swipes, Pans และ Pinhces รวมถึงท่าทางมือถืออื่น ๆ คุณสามารถใช้ hammerjs กับ HostListener Decorator หรือการผูกมัดเหตุการณ์
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/events/hammer_gery.ts,http://hammerjs.github.io/api/#hammer.manager,https:/angular.io/api
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | แท็ก: เคล็ดลับที่ดีรู้ส่วนประกอบท่าทางท่าทาง
คุณสามารถสร้างส่วนประกอบผู้ช่วยของตัวเองและใช้แทน *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.angularindepth.com/https-medium-homasburleson-animated
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: เคล็ดลับเทมเพลตส่วนประกอบที่รู้ได้ดี
ด้วย 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
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: ส่วนประกอบเคล็ดลับที่ดีถึงความรู้
*ngIf Directive ยังสนับสนุนคำสั่ง else
< div *ngIf =" isLoading; else notLoading " > loading... </ div >
< ng-template #notLoading > not loading </ ng-template >
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: เทมเพลต NGIF
นำทางด้วย matrix params:
เราเตอร์จะนำทางไปที่ /first;name=foo/details
< a [routerLink] =" ['/', 'first', {name: 'foo'}, 'details'] " >
link with params
</ a > https://stackblitz.com/edit/angular-xvy5pd
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: การกำหนดเส้นทาง
ในบางกรณีคุณสมบัติ @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));Angular/Angular#791
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: เคล็ดลับการจัดการคุณสมบัติวัตถุที่ควรทราบ
เพื่อหลีกเลี่ยงการดำเนินการที่มีราคาแพงเราสามารถช่วย Angular ในการติดตามรายการใดที่เพิ่มหรือลบ IE ปรับแต่งอัลกอริทึมการติดตามเริ่มต้นโดยการให้ตัวเลือกแทร็กโดย NgForof
เพื่อให้คุณสามารถให้ฟังก์ชั่นแทร็กบี้ที่กำหนดเองที่จะส่งคืนตัวระบุที่ไม่ซ้ำกันสำหรับแต่ละรายการที่ทำซ้ำ ตัวอย่างเช่นค่าคีย์บางอย่างของรายการ หากค่าคีย์นี้ตรงกับอันก่อนหน้านั้น 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 ;
}
}หากได้รับแทร็กบี้แทร็กเชิงมุมจะเปลี่ยนไปตามค่าการส่งคืนของฟังก์ชัน
ตอนนี้เมื่อคุณเปลี่ยนคอลเลกชัน Angular สามารถติดตามรายการที่เพิ่มหรือลบออกตามตัวระบุที่ไม่ซ้ำกันและสร้าง/ทำลายรายการที่เปลี่ยนแปลงเท่านั้น
https://angular.io/api/common/ngforof,https://angular.io/api/core/trackbyfunction
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: ประสิทธิภาพส่วนประกอบเคล็ดลับที่ดีต่อความรู้
ภายใต้ฮูดคอมไพล์คำสั่งโครงสร้างเป็นองค์ประกอบ 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 directive เขียนโดยใช้ microsyntax คุณสามารถเรียนรู้เกี่ยวกับมันในเอกสาร
ตรวจสอบเครื่องมือโต้ตอบที่แสดงการขยายตัวของ Alexey Zuev
https://angular.io/guide/structural-directives#microsyntax,https://alexzuza.github.io/ng-structural-directive-expander/,https://angular.io/guide/structural-directives
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: 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
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: เคล็ดลับรูปแบบปฏิกิริยาที่ควรทราบ
มันง่ายมากที่จะเพิ่มแป้นพิมพ์ลัดในเทมเพลต:
< 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
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: เคล็ดลับการรู้ที่ดี
องค์ประกอบเชิงมุมที่แสดงผลทุกชิ้นจะถูกห่อหุ้มในองค์ประกอบโฮสต์ (ซึ่งเหมือนกับตัวเลือกขององค์ประกอบ)
เป็นไปได้ที่จะผูกคุณสมบัติและคุณลักษณะขององค์ประกอบโฮสต์โดยใช้ @hostbinding decorators เช่น
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' ;
}
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: ส่วนประกอบ
โดยทั่วไปเราได้รับหนึ่งอินสแตนซ์บริการต่อแอปพลิเคชันทั้งหมด นอกจากนี้ยังเป็นไปได้ที่จะสร้างอินสแตนซ์ของบริการต่อส่วนประกอบหรือคำสั่ง
@ 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
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: เคล็ดลับส่วนประกอบการฉีดขึ้นอยู่กับการพึ่งพา
เป็นไปได้ที่จะเพิ่มผู้ฟังเหตุการณ์ทั่วโลกในส่วนประกอบ/คำสั่งของคุณด้วย 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' )
}คุณยังสามารถผ่าน params:
@ HostListener ( 'window:keydown.ArrowRight' , '$event.target' )
next ( target ) {
console . log ( 'Pressed right on this element: ' + target )
}
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: ส่วนประกอบเหตุการณ์
บางครั้งคุณต้องเข้าถึง 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
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: การฉีดพึ่งพา
นี่คือวิธีที่จะแจ้งให้ผู้ใช้ทราบว่ามีฟิลด์ที่มีค่าที่ไม่ถูกต้อง
ฟังก์ชั่น 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
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: เคล็ดลับการตรวจสอบรูปแบบปฏิกิริยาที่ควรทราบ
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-ngtemplateLetlet
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: เทมเพลต
โดยค่าเริ่มต้นแถบเชิงมุมทั้งหมดช่องว่างทั้งหมดในเทมเพลตเพื่อบันทึกไบต์ โดยทั่วไปปลอดภัย
สำหรับกรณีที่หายากเมื่อคุณต้องการรักษาพื้นที่คุณสามารถใช้แอตทริบิวต์ ngPreserveWhitespaces พิเศษ:
< div ngPreserveWhitespaces >
(___()'`;
/, /`
jgs \"--\
</ div >คุณยังสามารถใช้ตัวเลือก PreserveWhitespaces บนส่วนประกอบ
https://twitter.com/mgechev/status/1108913389277839360
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | แท็ก: เคล็ดลับ
ในขณะที่วิธีที่ดีที่สุดในการนำรหัสของคุณกลับมาใช้ใหม่คือการสร้างส่วนประกอบ แต่ก็เป็นไปได้ที่จะทำในเทมเพลต
ในการทำเช่นนี้คุณสามารถใช้ ng-template พร้อมกับ *ngTemplateOutlet Directive
< 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
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: เทมเพลต
หากคุณต้องการ 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
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: Tip Pipes Library
คุณสามารถใช้การเชื่อมโยงคุณสมบัติขั้นสูงเพื่อตั้งค่าสไตล์เฉพาะตามค่าคุณสมบัติส่วนประกอบ:
< 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 >
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: สไตล์
คล้ายกับวิธีที่คุณสามารถผูกสองทาง [(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-in-angular-application-e4e8388508ff,https://angular.io/guide/dependency-injection
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: การทดสอบการฉีดขึ้นอยู่กับการพึ่งพา
เป็นไปได้ที่จะใช้ @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
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: เคล็ดลับที่ดีต่อการรับรู้การฉีดขึ้นอยู่กับการพึ่งพา
Angular ช่วยให้เราสามารถควบคุมวิธีการจัดการโมดูลล่วงหน้าได้
มี 2 กลยุทธ์ที่จัดทำโดย @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/preloadingstrategy,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 และ lazy-loading-strategies-with-angular
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: เราเตอร์
เป็นไปได้ที่จะใช้แท็ก 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>`
} )
การสาธิตแบบโต้ตอบของตัวอย่างนี้ | ⬆กลับไปด้านบน | Tags: เคล็ดลับ SVG
