30 seconds of angular 다운로드 30 seconds of angular 소스 코드 다운로드

로고 30 초의 각도

30 초 이내에 이해할 수있는 유용한 각도 스 니펫의 선별 된 모음.

Snippet을 검색하려면 Ctrl + F 또는 Command + F 를 사용하십시오.
스 니펫은 각도 8+로 작성됩니다.

30 초의 각도

템플릿에서 열거적 인 액세스
치트 시트 및 체크리스트
구성 요소 상태 디버깅
기본 뷰 캡슐화 값
Hammerjs-Gestures
로더 구성 요소
NG-Content
다른 ngif
중간의 선택적 매개 변수
입력 및 출력 이름 변경
안전한 탐색 연산자
루프를 위해 트랙 비
microsyntax 이해

중간 스 니펫

모든 중첩 양식 컨트롤에 액세스합니다
요소에 키보드 바로 가기 추가
호스트 바인딩으로 호스트 특성에 결합합니다
구성 요소 수준 제공 업체
글로벌 이벤트 청취자
문서 주입
터치 된 반응성 필드를 표시하십시오
출력으로 관찰 가능
입력으로 템플릿을 전달합니다
공백 공백
템플릿에서 코드 재사용
기존 사용자 정의 파이프 재사용
스타일 바인딩
모든 속성을 바인딩하는 양방향
app_initializer를 사용하여 앱 시작을 지연시킵니다
창 위치 주입

고급 스 니펫

Viewchild를 사용하여 다른 유형의 구성 요소를 얻습니다
라우터 커스텀 프리 로딩
SVG

초보자 스 니펫

템플릿에서 열거적 인 액세스

열거는 훌륭하지만 기본적으로 각도 템플릿에서는 보이지 않습니다. 이 작은 트릭으로 액세스 할 수있게 할 수 있습니다.

 enum Animals {
  DOG ,
  CAT ,
  DOLPHIN
}

@ Component ( {
  ...
} )
export class AppComponent {
  animalsEnum : typeof Animals = Animals ;
}

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 열거 템플릿

치트 시트 및 체크리스트

한 곳에 응축 된 많은 유용한 정보가 포함 된 각도 치트 시트 또는 (대체 버전)을 확인하십시오.

또한 Angular Checklist에는 각도 응용 프로그램을 개발할 때 발생하는 일반적인 실수 목록이 포함되어 있습니다.

모래밭

https://malcoded.com/angular-cheat-sheet/https://angular.io/guide/cheatsheet,https://angular.io/guide/styleguide

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 팁 치트 시트

구성 요소 상태 디버깅

실행하여 브라우저 콘솔에서 구성 요소 상태를 디버깅하십시오.

 ng . probe ( $0 ) . componentInstance

$0 현재 DEV 도구에서 선택된 DOM 노드 (이전의 경우 $1 등)입니다.

보너스

아이비 렌더러 엔진 :

 ng . getComponent ( $0 )

모래밭

https://blog.angularindepth.com/everythe-shone-need-to- know-debugging-angular-applications-d308ed8a51b4

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 잘 알고있는 팁

기본 뷰 캡슐화 값

기본값과 다른 ViewEncapsulation 값을 사용하는 경우 모든 구성 요소의 값을 수동으로 설정하는 것이 어려울 수 있습니다.

운 좋게도 앱을 부트 스트랩 할 때 전 세계적으로 구성 할 수 있습니다.

 platformBrowserDynamic ( ) . bootstrapModule ( AppModule , [
  {
    // NOTE: Use ViewEncapsulation.None only if you know what you're doing.
    defaultEncapsulation : ViewEncapsulation . None
  }
] ) ;

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 구성 스타일

Hammerjs-Gestures

스 와이프, 프라이팬 및 핀 호스뿐만 아니라 다른 모바일 제스처에 따라 행동하려면 HostListener 너 데코레이터 또는 이벤트 바인딩과 함께 hammerjs 사용할 수 있습니다.

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_gestures.ts ,http://hammerjs.github.io/api/api/#hammer.https://angular.io/api/platform-rowser/hammergengergogestureconfig

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 알기 힘든 팁 구성 요소 제스처

로더 구성 요소

자신만의 도우미 구성 요소를 만들어 *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-96a29d11b,https://blog.angularindepth.com/https-medium-com-thomasson-animated-ghosts-bfc0451fba

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 알기 좋은 구성 요소 템플릿

NG-Content

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

*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

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 구성 요소 템플릿

안전한 탐색 연산자

안전한 내비게이션 연산자는 구성 요소 템플릿 표현식에서 Null 참조 예외를 방지하는 데 도움이됩니다. 객체 속성 값이 존재하거나 그렇지 않으면 NULL을 반환합니다.

 < 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

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 객체 속성 처리 팁을 알아야합니다

루프를 위해 트랙 비

값 비싼 작업을 피하기 위해 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 ;
  }
}

Trackby가 주어지면 각도 트랙은 함수의 반환 값에 의해 변경됩니다.

이제 컬렉션을 변경하면 Angular는 고유 식별자에 따라 추가 또는 제거 된 항목을 추적하고 변경된 항목 만 생성/파괴 할 수 있습니다.

모래밭

https://angular.io/api/common/ngforof,https://angular.io/api/core/trackbyfunction

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 알기 힘든 팁 구성 요소 성능

microsyntax 이해

후드 각도 아래에서 구조 지침을 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-diperatic-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

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 알기 좋은 팁

호스트 바인딩으로 호스트 특성에 결합합니다

모든 렌더링 된 각도 구성 요소는 호스트 요소 (구성 요소의 선택기와 동일)에 랩핑됩니다.

@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' ;
}

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 구성 요소

구성 요소 수준 제공 업체

일반적으로 전체 응용 프로그램마다 하나의 서비스 인스턴스가 나타납니다. 구성 요소 또는 지침 당 서비스 인스턴스를 만들 수도 있습니다.

@ 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

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 팁 구성 요소 종속성 주입

글로벌 이벤트 청취자

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

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 종속성 주입

터치 된 반응성 필드를 표시하십시오

다음은 Valid 값이없는 필드가 있음을 사용자에게 알리는 방법입니다.

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

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 반응 형태 검증 팁을 알아야 할 좋은

출력으로 관찰 가능

@Output 에 사용되는 EventEmitters 방출 방법이있는 관찰 가능입니다.

즉, 대신 Observable 인스턴스를 사용할 수 있습니다. 예를 들어 양식 콘트롤 값 변경을 직접 연결할 수 있습니다.

 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-ctainer-ngtemplateoutlet

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 템플릿

공백 공백

기본적으로 각도는 바이트를 절약하기 위해 템플릿의 모든 공백을 스트립합니다. 일반적으로 안전합니다.

공간을 보존 해야하는 드문 경우의 경우 특수 ngPreserveWhitespaces 속성을 사용할 수 있습니다.

 < div ngPreserveWhitespaces >
             (___()'`;
             /,    /`
       jgs   \"--\
</ div >

구성 요소에서 PreserveWhitespaces 옵션을 사용할 수도 있습니다.

모래밭

https://twitter.com/mgechev/status/1108913389277839360

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 팁

템플릿에서 코드 재사용

코드를 재사용하는 가장 좋은 방법은 구성 요소를 작성하는 것이지만 템플릿에서도 수행 할 수도 있습니다.

이렇게하려면 *ngTemplateOutlet 지시문과 함께 ng-template 사용할 수 있습니다.

 < 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

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 템플릿

기존 사용자 정의 파이프 재사용

사용자 정의 pipe 필요한 경우, 하나를 생성하기 전에 70 개 이상의 명시 적 커스텀 파이프가있는 NGX 파이프 패키지를 확인하는 것이 좋습니다.

몇 가지 예는 다음과 같습니다.

 < 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를 사용하여 앱 시작을 지연시킵니다

APP_INITIALIZER 토큰을 사용하여 앱을 반환하는 약속을 제공하여 앱을 시작하기 전에 비동기 작업을 실행할 수 있습니다.

@ NgModule ( {
  providers : [
    {
      provide : APP_INITIALIZER ,
      useValue :  functionReturningPromise
      multi : true
    } ,
} )
export class AppModule { }

모래밭

https://hackernoon.com/hook-into-angular-initialization-addd41a6b7e,https://angular.io/api/core/app_initializer

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 팁

창 위치 주입

테스트 목적으로 구성 요소에 window.location 객체를 주입 할 수 있습니다. Angular가 제공하는 사용자 정의 InjectionToken 메커니즘으로이를 달성 할 수 있습니다.

 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-in-angular-application-e4e838508ff,https://angular.io/guide/delependency-injection

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 종속성 주입 테스트

고급 스 니펫

Viewchild를 사용하여 다른 유형의 구성 요소를 얻습니다

@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 에서 제공하는 2 가지 전략이 있습니다 : 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-ba3c75e424cb,https://medium.com/@adrianfaci u/custom-preloading-strategy-for-angular-modules-b3b5c873681a, https : //coryrylan.com/blog/custom-preloading-and-lazy-loading-strategies-with-angular

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 라우터

SVG

각도 구성 요소에서 SVG 태그를 사용하여 아름다운 그래프와 시각화를 만들 수 있습니다. 알아야 할 세 가지가 있습니다.

SVG 속성을 바인딩 할 때는 attr 사용하십시오

 < circle [attr.cx] =" x " [attr.cy] =" y " > </ circle >

하위 구성 요소를 만들 때 태그 선택기가 아닌 속성을 사용하십시오.

// Not: < child-component > </ child-component >
< g child-component > </ g >

@ Component ( { selector : '[child-component]' } )

하위 구성 요소에서 SVG 태그를 사용하는 경우 SVG Prefix를 사용합니다.

@ Component ( {
  selector : '[child-component]' ,
  template : `<svg:circle></svg:circle>`
} )

이 스 니펫의 대화식 데모 | ⬆ 위로 돌아 가기 | 태그 : 팁 SVG

확장하다

30 seconds of angular

30 초의 각도

목차

초보자 스 니펫

템플릿에서 열거적 인 액세스

치트 시트 및 체크리스트

모래밭

구성 요소 상태 디버깅

모래밭

기본 뷰 캡슐화 값

Hammerjs-Gestures

모래밭

로더 구성 요소

모래밭

NG-Content

모래밭

다른 ngif

중간의 선택적 매개 변수

모래밭

입력 및 출력 이름 변경

모래밭

안전한 탐색 연산자

모래밭

루프를 위해 트랙 비

모래밭

microsyntax 이해

모래밭

중간 스 니펫

모든 중첩 양식 컨트롤에 액세스합니다

모래밭

요소에 키보드 바로 가기 추가

모래밭

호스트 바인딩으로 호스트 특성에 결합합니다

구성 요소 수준 제공 업체

모래밭

글로벌 이벤트 청취자

문서 주입

모래밭

터치 된 반응성 필드를 표시하십시오

모래밭

출력으로 관찰 가능

입력으로 템플릿을 전달합니다

모래밭

공백 공백

모래밭

템플릿에서 코드 재사용

모래밭

기존 사용자 정의 파이프 재사용

모래밭

스타일 바인딩

모든 속성을 바인딩하는 양방향

app_initializer를 사용하여 앱 시작을 지연시킵니다

모래밭

창 위치 주입

모래밭

고급 스 니펫

Viewchild를 사용하여 다른 유형의 구성 요소를 얻습니다

모래밭

라우터 커스텀 프리 로딩

모래밭

SVG