The Hidden Docs In Angular 谢亚东（执衡） Senior Front-end Engineer Alibaba 

谢亚东（执衡） Senior Front-end Engineer Alibaba 

No content

Angular Evolution 2.0 4.0 5.0 6.0 7.0 8.0 9.0 2016 Sep 2019 Nov 

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ``, }) export class AppComponent { name = 'Angular'; } 2.0 4.0 6.0 defineComponent({ type: AppComponent, selectors: [ ["app-root"] ], decls: 3, vars: 1, template: function AppComponent_Template(rf, ctx) { if (rf & 1) { elementStart(0, "div"); elementStart(1, "h2"); text(2); elementEnd(); elementEnd(); } if (rf & 2) { advance(2); textInterpolate1("Hello ", ctx.name, ""); } }, encapsulation: 2 }); 9.0.0-rc.3 Code After Compiler 

4.0 1170 KB 9.0.0-rc.3 gzip 30 KB Bundle Size After Compiler 8.0 133 KB Differential Loading 9.0.0-rc.3 94.8 KB Ivy 5.0 152 KB 

Broccoli Webpack Bazel 2 3 4 Command-Line Interface @angular/cli + 

Stable & Reliable 

DATE STABLE RELEASE COMPATIBILITY October/November 2019 9.0.0 ^8.0.0 May 2020 10.0.0 ^9.0.0 Release schedule & Semantic Versioning ng update & Update Guide ng update @angular/cli @angular/core 

The Hidden Docs in Angular 

The Hidden Docs in Angular 

Change Detection The Hidden Docs in 

@Component({ selector: "hello", template: ` add minus ` }) export class HelloComponent { count = 0; add() { this.count += 1; } minus() { this.count -= 1; } } Counter Change Detection DEMO 

Change Detection React Change to state cause change detection setState or hooks Angular ? 

When to Trigger Change Detection? • Events: all browser events (click, mouseover, keyup, etc.) • Timers: setTimeout() and setInterval() • XHR: Ajax requests Browser Async API 

When to Trigger Change Detection? Monkey Patch zone.js • Events: all browser events (click, mouseover, keyup, etc.) • Timers: setTimeout() and setInterval() • XHR: Ajax requests Browser Async API DEMO 

this.applicationRef.tick() this._zone.onMicrotaskEmpty.subscribe( { next: () => { this._zone.run(() => { this.tick(); }); } }); _loadComponent(componentRef) { this.tick(); } Explore the Source Code ApplicationRef Demo with zone.js 

for (let view of this._views) { view.detectChanges(); } this.applicationRef.tick() ChangeDetectionRef CD CD CD CD CD CD CD CD CD CD CD this.cdr.detectChanges() Explore the Source Code 

for (let view of this._views) { view.detectChanges(); } this.applicationRef.tick() ChangeDetectionRef CD CD CD CD CD CD CD CD CD CD CD Demo with ChangeDetectionRef Explore the Source Code 

detach() markForCheck() detectChanges() OnPush ChangeDetectionRef Explore the Source Code 

ViewModel View Detection Sequence Why is it important? DEMO 

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. DEMO 

1. update bound properties for all child components 2. call OnChanges, OnInit, DoCheck and AfterContentInit lifecycle hooks on all child components 3. update DOM for the current component 4. run change detection for a child component 5. call ngAfterViewInit lifecycle hook for all child components Detection Sequence Sequence is slightly different under Ivy engine 

One Way Data Flow Unidirectional Data Flow VS 

Summary 1. When 2. Source Code 3. Detection Sequence zone.js + tick ApplicationRef + ChangeDetectionRef ViewModel —> View & Unidirectional Data Flow 

Component | Directive 1. Selector 2. @Input 3. Content Projection 4. Dynamic Component The Hidden Docs in 

Selector 

Selector const _SELECTOR_REGEXP = new RegExp( '(\\:not\\()|' + //":not(" '([-\\w]+)|' + // "tag" '(?:\\.([-\\w]+))|' + // ".class" // "-" should appear first in the regexp below as FF31 parses "[.-\w]" as a range '(?:\\[([-.\\w*]+)(?:=([\"\']?)([^\\]\"\']*)\\5)?\\])|' + // "[name]", "[name=value]", // "[name="value"]", // "[name='value']" '(\\))|' + // ")" '(\\s*,\\s*)', // "," 'g'); export interface Component extends Directive Explore the Source Code 1. :not() 2. Tag 3. Attribute Same Selector 

Attribute Selector in Component VS 1. Supporting Original Attributes {{name}} .parent > .child{ height: 200px; background: gray; } 2. Keep DOM structure 

Tag Selector in Directive Lighthouse Scoring import { Directive, HostBinding } from '@angular/core'; @Directive({ selector: 'a[target="_blank"]:not([rel="noopener"])' }) export class SafeLinkDirective { @HostBinding('style.color') color = 'red'; @HostBinding('rel') rel = 'noopener'; } 

@Input 

typeof @Input data Input Correction this.data === true 

@Input as Attribute @Input() set ngxOpen(value) { this._open = this.coerceBooleanProperty(value); } get ngxOpen() { return this._open; } coerceBooleanProperty(value: any): boolean { return value != null && `${value}` !== "false"; } @InputBoolean() ngxOpen = false; Decorators 

@Input with * @Input() set ngIfElse(templateRef: TemplateRef|null) { assertTemplate('ngIfElse', templateRef); this._elseTemplateRef = templateRef; this._elseViewRef = null; // clear previous view if any. this._updateView(); } DEMO 

Content Projection 

Content Projection Multi-Slot 1. Tag Selector 2. Attribute Selector 3. Not Selector 4. Default Selector 5. ngProjectAs 

Content Projection Component Interacting ContentChildren 1. ChangeDetection Error 2. NgTemplateOutlet 

Content Projection Component Interacting Dependency Injection 1. NgTemplateOutlet 2. Get Root Component 

Content Projection Content Empty Detection 

Content Projection Content Empty Detection ContentObserver Demo MutationObserver 

Content Projection Copy Content copy me copy me X 8 

Content Projection Copy Content * Demo 

Content Projection Move Content content 1 content 2 content 3 content 3 content 2 content 1 

Content Projection Move Content content 1 content 2 content 3 title 1 title 2 title 3 content 1 

Content Projection Move Content Eager Load Lazy Load VS 

Dynamic Component 

Dynamic Component The missing compile Template String compile Dynamic Component 

Dynamic Component The missing compile export function createCompiler(compilerFactory: CompilerFactory) { return compilerFactory.createCompiler([compilerOptions]); } providers: [ { provide: COMPILER_OPTIONS, useValue: compilerOptions, multi: true }, { provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS] }, { provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory] } ], const dynamicComponent = Component({ template })( class { context = context; } ); const dynamicModule = NgModule({ declarations : [ dynamicComponent ], exports : [ dynamicComponent ], entryComponents: [ dynamicComponent ], imports : [ FormsModule ] })(class DynamicModule { }); this.compiledModule = await this.compiler.compileModuleAndAllComponentsAsync(dynamicModule); DEMO 

Dynamic Component Ivy Render import { Component, ɵrenderComponent as renderComponent, Injector, ɵLifecycleHooksFeature as LifecycleHooksFeature } from "@angular/core"; @Component({ selector : 'app-root', templateUrl: './app.component.html', styleUrls : ['./app.component.css'] }) export class AppComponent { constructor(private injector: Injector) { import('./dynamic/dynamic.component').then(({ DynamicComponent }) => { renderComponent(DynamicComponent, { injector, host: '#slot', hostFeatures: [LifecycleHooksFeature] }); }); } } 

No content