Angular 18+ 高级教程

请按顺序阅读

里面会讲到

@Input, @Output

lifecycle hook: constructor, ngOnChanges, ngOnInit, ngAfterViewInit, ngOnDestroy

Component 组件の Angular Component vs Shadow DOM (CSS Isolation & slot)

里面会讲到

ViewEncapsulation ShadowDom, Emulated, None

ng-content, ::ng-deep, ngProjectAs

Component 组件の Template Binding Syntax

里面会讲到

{{ }}, [], (), [()], Signal-based Two-way Bidding

@HostBinding, @HostListener

Component 组件の Attribute Directives 属性型指令

里面会讲到

Attribute Directives, ngStyle, ngClass, Directive composition API

Component 组件の Pipe 管道

Change Detection & Ivy rendering engine (必读)

里面会讲到

TView, LView, TNode, RNode, Zone.js,

ChangeDetectionStrategy, markForCheck, ngDoCheck, ngZone.runOutsideAngular, ApplicationRef.tick, detectChanges, refreshView, AsyncPipe,

provideExperimentalZonelessChangeDetection

Component 组件の Dependency Injection & NodeInjector (必读)

里面会讲到

NodeInjector, Component Injector Tree, bootstrapApplication 源码解析, hostView,

inject 查找过程 & 源码解析, Bloom Filter, viewProviders & host, EnvironmentInjector, EnvironmentProviders, makeEnvironmentProviders,

HostAttributeToken, HOST_TAG_NAME

Component 组件の Lifecycle Hooks (必读)

里面会讲到

constructor, OnInit, AfterContentInit, AfterViewInit, OnChanges, DoCheck, AfterContentChecked, AfterViewChecked,

afterNextRender, afterRender, APP_INITIALIZER, APP_BOOTSTRAP_LISTENER

Component 组件の Query Elements (必读)

里面会讲到

@ViewChild, @ViewChildren, @ContentChild, @ContentChildren, Template Variables, exportAs

Component 组件の Dynamic Component 动态组件 (必读)

里面会讲到

createComponent, <ng-container />, ViewContainerRef, EnvironmentInjector, ComponentRef,

LContainer, ViewRef, reflectComponentType, ngOnDestroy, DestroyRef, Dynamic Directive Composition API

Signals (必读)

里面会讲到

signal, computed, effect, toSignal, toObservable,

Signal-based Input, Signal-based Output, Signal-based Query

WritableSignal, Signal, SignalNode, ComputedNode, ReactiveLViewConsumer, ReactiveNode, setActiveConsumer

EffectRef, EffectHandle, Watch, WatchNode, ZoneAwareEffectScheduler

markAncestorsForTraversal

InputSignalNode, applyValueToInputSignal

Component 组件の ng-template (必读)

里面会讲到

ng-template, TemplateRef, Template Context, Template Context Type Guard, $implicit,

Embedded View Injector

Component 组件の Structural Directive (结构型指令) & Syntax Reference (微语法)

里面会讲到

NgTemplateOutlet, NgComponentOutlet, NgIf, NgFor, NgSwitch, 微语法

Component 组件の Control Flow

里面会讲到

@if, @else if, @else,

当 @if 遇上 <ng-content>

@for, @empty,

@switch, @case, @default

@defer @placeholder @loading @error

Component 组件の @let Template Local Variables

里面会讲到

@let

NgModule (必读)

里面会讲到

createNgModule, NgModuleRef

HttpClient

里面会讲到

HttpClient, HttpRequest, HttpHeaders, HttpParams, HttpResponse, HttpEvent, HttpInterceptor, HttpContext

Animation 动画

里面会讲到

AnimationBuilder, AnimationPlayer, animate, style, keyframes, group, sequence, query, stagger, animation, useAnimation,

trigger, state, transition

[@trigger], [@.disabled], (@trigger.start), (@trigger.done), animateChild

Reactive Forms (完成度...74%)

里面会讲到

FormControl, FormControlDirective, DefaultValueAccessor, ControlValueAccessor,

FormGroup, UntypedFormControl, FormRecord, UntypedFormGroup

ControlEvent

Routing 路由 (原理篇) (完成度...70%)

里面会讲到

UrlTree, SegmentGroup, Segment, Matrix Parameters, Route, ActivatedRouteSnapshot, RouterStateSnapshot, ActivatedRoute, RouterState,

OutletContext, PlatformLocation, LocationStrategy, Location, UrlSerializer, StateManager, NavigationTransitions,

ViewportScroller, RouterScroller, Router

Routing 路由 (功能篇) (完成度...1%)

里面会讲到

Routes, <router-outlet />, 404 not found, redirect,

RouterLink, queryParamsHandling,

withComponentInputBinding, ActivateRoute, params, queryParams,

lazy-loading, preloading,

LocationStrategy, withInMemoryScrolling

inject, input, output, viewChildren, contentChildren

Zoneless Change Detection

Signal

Control Flow

Using Tailwind CSS with Angular,

DomSanitizer

Renderer2 和 inject(DOCUMENT)

Dynamic Add Event Listener (Renderer2.listen)

PLATFORM_ID, isPlatformBrowser, isPlatformServer

forwardRef

enviroment.ts, isDevMode, ngDevMode

CdkPortalOutlet, DomPortalOutlet

CDK Layout の Breakpoints

CDK Scrolling

里面会讲到

CdkScrollable, ScrollDispatcher, ViewportRuler, Virtual Scrolling,

DataSource

Override Material Button Color

Override Material Checkbox align-items

Override Material Form Field Styles

Override Material Snackbar Styles

SelectionModel

Interactive disabled buttons

Angular 不支持 PostCSS Configuration

Angular 不支持 Static Image Hash

@Directive 指令不支持 CSS

Angular 的 Limitation の Query Elements

里面会讲到

不支持 viewChildren descendants

不支持 viewChildren <ng-container /> 和 <ng-content>