30 seconds of angular下载30 seconds of angular源代码下载

徽标30秒

您可以在30秒或更短的时间内可以理解的有用角片段的策划集合。

使用CTRL + F或命令+ F搜索摘要。
摘要用Angular 8+编写。

30秒

访问所有嵌套形式控件
将键盘快捷键添加到元素
用主机结合到主机属性
组件级提供商
全球事件听众
注射文档
标记触摸的反应性场
可观察到的输出
将模板作为输入
preseving whitespaces
在模板中重复使用代码
重复现有的自定义管道
样式绑定
双向约束任何财产
使用app_initializer延迟应用程序启动
窗户位置注入

高级片段

通过ViewChild获取不同类型的组件
路由器定制预加载
SVG

初学者摘要

在模板中访问枚举

枚举很棒，但默认情况下在角模板中看不到它们。有了这个小技巧，您可以使它们可以访问。

 enum Animals {
  DOG ,
  CAT ,
  DOLPHIN
}

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

该片段的互动演示| ⬆回到顶部|标签：枚举模板

作弊表和清单

查看Angular备忘单或（替代版本），其中包含在一个地方凝结的许多有用信息。

同样，在开发角度应用时，Angular Charglist包含的策划了常见错误列表。

链接

https://malcoded.com/Angular-Cheat-sheet/，https://angular.io/guide/guide/cheatsheet，https://angular.io/guide/guide/styleguide

该片段的互动演示| ⬆回到顶部|标签：提示备忘单

组件状态调试

通过运行来调试浏览器控制台中的组件状态：

 ng . probe ( $0 ) . componentInstance

$0是当前在开发工具中选择的DOM节点（前一个$1 ，依此类推）。

奖金

使用常春藤渲染器引擎：

 ng . getComponent ( $0 )

链接

https://blog.angularindepth.com/everything-you-need-to-noc-about-debugging-angular-applications-d308ed8a51b4

该片段的互动演示| ⬆回到顶部|标签：知名技巧

默认查看范围值

如果您使用的是与默认值不同的ViewEncapsulation值，则可以为每个组件手动设置该值可能令人生畏。

幸运的是，您可以在引导应用程序时将其配置为全球：

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

该片段的互动演示| ⬆回到顶部|标签：配置样式

hammerjs for

要采取刷卡，平底锅和针刺以及其他移动手势，您可以将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/src/src/src/src/events/hammer_gestures.ts ,, http://hammerjs.github.io/api/api/api/papi/papi/papi/papi/papi/#hammer.manager.manager.manager，https：/

该片段的互动演示| ⬆回到顶部|标签：知识的提示组件手势

加载程序组件

您可以创建自己的辅助组件并使用它代替*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-hidden-docs-96a29d70d11b,https://blog.angularindepth.com/https-medium-com-com-com-com-com-com-com-thomasburleson-animiman-animimated-ghosts-ghosts-bfc045a51fba

该片段的互动演示| ⬆回到顶部|标签：提示知识的组件模板

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

该片段的互动演示| ⬆回到顶部|标签：组件模板

安全导航操作员

安全的导航操作员有助于防止组件模板表达式中的无效异常。如果存在或否则，它将返回对象属性值，否则将返回。

 < 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

该片段的互动演示| ⬆回到顶部|标签：对象属性处理提示很好

trackby in for循环

为了避免昂贵的操作，我们可以帮助Angular跟踪添加或删除的项目，即通过向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/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-directures#microsyntax，https://alexzuza.github.io/ng-structural-directive-directive-expander/，https://gh/angular.io/guide/guide/guide/guide/guide/guide/guide/structural-directures-directiver-directives#inside-ngfor

该片段的互动演示| ⬆回到顶部|标签：尖端结构指令微词法

中间片段

访问所有嵌套形式控件

有时，我们需要使用每个控件的工作形式。这是可以做到的：

 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-vents

该片段的互动演示| ⬆回到顶部|标签：提示知识

用主机结合到主机属性

每个渲染的角组件都包裹在主机元素中（与组件的选择器相同）。

可以使用@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-depertincy-injoction#component-level-injectors，https://stackblitz.com/edit/angular/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 ) ;
  }
}

奖金

查看更多通用方法，访问Kiba的所有嵌套形式控件以使用控件。

链接

https://angular.io/guide/Reactive-forms

该片段的互动演示| ⬆回到顶部|标签：反应性形式验证提示很擅长

可观察到的输出

用于@Output的EventEmitters只是具有EMIT方法的可观察到的。

这意味着您可以使用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

该片段的互动演示| ⬆回到顶部|标签：模板

preseving whitespaces

默认情况下，Angular将模板中的所有空格带以节省字节。通常这是安全的。

对于极少数情况，当您需要保留空间时，您可以使用特殊的ngPreserveWhitespaces属性：

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

您还可以在组件上使用PreserveWhitespaces选项。

链接

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/Structural-directures-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-ingular-initialization-process-add41a6b7e，https://angular.io/api/api/core/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-location-in-angular-application-e4e8388508ff,https://angular.io/guide/guide/depportency/depportency-indoction

该片段的互动演示| ⬆回到顶部|标签：依赖项注入测试

高级片段

通过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提供了两种策略： 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-modules-ba3c75e424cb，https://medium.com/medium.com/@adrianfaci u/custom-preloading-strategy-for-angular-modules-b3b5c873681a，https：//coryrylan.com/blog/custom-preloading-and-preloading-and-lazy-lazy-loading-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前缀：

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

该片段的互动演示| ⬆回到顶部|标签：提示SVG

展开

30 seconds of angular

30秒

目录

初学者摘要

在模板中访问枚举

作弊表和清单

链接

组件状态调试

链接

默认查看范围值

hammerjs for

链接

加载程序组件

链接

ng-content

链接

NGIF其他

中间的可选参数

链接

重命名输入和输出

链接

安全导航操作员

链接

trackby in for循环

链接

了解微囊泡

链接

中间片段

访问所有嵌套形式控件

链接

将键盘快捷键添加到元素

链接

用主机结合到主机属性

组件级提供商

链接

全球事件听众

注射文档

链接

标记触摸的反应性场

链接

可观察到的输出

将模板作为输入

链接

preseving whitespaces

链接

在模板中重复使用代码

链接

重复现有的自定义管道

链接

样式绑定

双向约束任何财产

使用app_initializer延迟应用程序启动

链接

窗户位置注入

链接

高级片段

通过ViewChild获取不同类型的组件

链接

路由器定制预加载

链接

SVG