Angular

本文集文档发布于灏天文库

3.Angular 高级主题

文档摘要

3.Angular 高级主题 Angular 高级主题 本章节将深入探讨 Angular 开发中的一些高级主题，旨在帮助开发者掌握更强大的技术，构建更健壮、可维护和高性能的应用程序。 3.1 状态管理 (State Management) 状态管理是复杂 Angular 应用的关键。随着应用规模的增长，组件之间共享和维护状态变得越来越困难。集中式状态管理可以解决这个问题，提供可预测的状态变化和更好的调试能力。 3.1.1 NgRx NgRx 是一个基于 Redux 模式的 Angular 状态管理库。它使用单一数据源（Store）、纯函数（Reducers）和不可变数据来管理应用状态。 核心概念： Store: 应用的单一数据源。 Actions: 描述发生的事件。

3.Angular 高级主题

3. Angular 高级主题

本章节将深入探讨 Angular 开发中的一些高级主题，旨在帮助开发者掌握更强大的技术，构建更健壮、可维护和高性能的应用程序。

3.1 状态管理 (State Management)

状态管理是复杂 Angular 应用的关键。随着应用规模的增长，组件之间共享和维护状态变得越来越困难。集中式状态管理可以解决这个问题，提供可预测的状态变化和更好的调试能力。

3.1.1 NgRx

NgRx 是一个基于 Redux 模式的 Angular 状态管理库。它使用单一数据源（Store）、纯函数（Reducers）和不可变数据来管理应用状态。

核心概念：

  • Store: 应用的单一数据源。

  • Actions: 描述发生的事件。

  • Reducers: 纯函数，接收先前的状态和 Action，返回新的状态。

  • Effects: 处理副作用，例如 API 调用。

  • Selectors: 从 Store 中选择数据。

代码实践：

  1. 安装 NgRx:

    npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools --save
​

  2. 定义 State, Actions, Reducers, Effects, Selectors:

    // src/app/store/todo.state.ts
export interface Todo {
  id: string;
  text: string;
  completed: boolean;
}
export interface TodoState {
  todos: Todo[];
  loading: boolean;
  error: string | null;
}
export const initialState: TodoState = {
  todos: [],
  loading: false,
  error: null,
};
// src/app/store/todo.actions.ts
import { createAction, props } from '@ngrx/store';
import { Todo } from './todo.state';
export const loadTodos = createAction('[Todo] Load Todos');
export const loadTodosSuccess = createAction('[Todo] Load Todos Success', props<{ todos: Todo[] }>());
export const loadTodosFailure = createAction('[Todo] Load Todos Failure', props<{ error: string }>());
export const addTodo = createAction('[Todo] Add Todo', props<{ text: string }>());
export const deleteTodo = createAction('[Todo] Delete Todo', props<{ id: string }>());
// src/app/store/todo.reducers.ts
import { createReducer, on } from '@ngrx/store';
import { initialState, TodoState } from './todo.state';
import * as TodoActions from './todo.actions';
export const todoReducer = createReducer(
  initialState,
  on(TodoActions.loadTodos, (state) => ({ ...state, loading: true })),
  on(TodoActions.loadTodosSuccess, (state, { todos }) => ({ ...state, loading: false, todos })),
  on(TodoActions.loadTodosFailure, (state, { error }) => ({ ...state, loading: false, error })),
  on(TodoActions.addTodo, (state, { text }) => ({
    ...state,
    todos: [...state.todos, { id: Math.random().toString(), text, completed: false }],
  })),
  on(TodoActions.deleteTodo, (state, { id }) => ({
    ...state,
    todos: state.todos.filter((todo) => todo.id !== id),
  }))
);
// src/app/store/todo.effects.ts
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import * as TodoActions from './todo.actions';
import { HttpClient } from '@angular/common/http';
import { Todo } from './todo.state';
@Injectable()
export class TodoEffects {
  loadTodos$ = createEffect(() =>
    this.actions$.pipe(
      ofType(TodoActions.loadTodos),
      mergeMap(() =>
        this.http.get<Todo[]>('https://jsonplaceholder.typicode.com/todos?_limit=5').pipe(
          map(todos => TodoActions.loadTodosSuccess({ todos })),
          catchError(error => of(TodoActions.loadTodosFailure({ error: error.message })))
        )
      )
    )
  );
  constructor(private actions$: Actions, private http: HttpClient) {}
}
// src/app/store/todo.selectors.ts
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { TodoState } from './todo.state';
export const selectTodoState = createFeatureSelector<TodoState>('todo');
export const selectTodos = createSelector(selectTodoState, (state) => state.todos);
export const selectLoading = createSelector(selectTodoState, (state) => state.loading);
export const selectError = createSelector(selectTodoState, (state) => state.error);
​

  3. 在 AppModule 中配置 NgRx:

    // src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { todoReducer } from './store/todo.reducers';
import { TodoEffects } from './store/todo.effects';
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    StoreModule.forRoot({ todo: todoReducer }),
    EffectsModule.forRoot([TodoEffects]),
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production, // Restrict extension to log-only mode
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
​

  4. 在组件中使用 Store:

    // src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { loadTodos, addTodo, deleteTodo } from './store/todo.actions';
import { selectTodos, selectLoading, selectError } from './store/todo.selectors';
import { Todo } from './store/todo.state';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  todos$: Observable<Todo[]>;
  loading$: Observable<boolean>;
  error$: Observable<string | null>;
  newTodoText = '';
  constructor(private store: Store) {
    this.todos$ = this.store.select(selectTodos);
    this.loading$ = this.store.select(selectLoading);
    this.error$ = this.store.select(selectError);
  }
  ngOnInit(): void {
    this.store.dispatch(loadTodos());
  }
  addTodo(): void {
    if (this.newTodoText.trim()) {
      this.store.dispatch(addTodo({ text: this.newTodoText }));
      this.newTodoText = '';
    }
  }
  deleteTodo(id: string): void {
    this.store.dispatch(deleteTodo({ id }));
  }
}
​
    <!-- src/app/app.component.html -->
<h1>Todo List</h1>
<div *ngIf="loading$ | async">Loading...</div>
<div *ngIf="error$ | async">Error: {{ error$ | async }}</div>
<input type="text" [(ngModel)]="newTodoText" placeholder="Add new todo" />
<button (click)="addTodo()">Add</button>
<ul>
  <li *ngFor="let todo of todos$ | async">
    {{ todo.text }}
    <button (click)="deleteTodo(todo.id)">Delete</button>
  </li>
</ul>
​

NgRx 数据流：

graph TD A[Component] --> B(Dispatch Action); B --> C{Store}; C --> D[Reducer]; D --> C; C --> E(Selector); E --> A; B --> F[Effects]; F --> G(API Call); G --> H{Store}; H --> D;

3.1.2 其他状态管理方案

  • Akita: 简单易用的状态管理库，适用于中小型应用。

  • RxJS BehaviorSubject: 使用 RxJS 提供的 BehaviorSubject 来管理状态，适用于简单的场景。

3.2 动态表单 (Dynamic Forms)

动态表单允许你在运行时定义表单结构，而不是在编译时硬编码。这对于需要根据用户角色、数据或配置动态调整表单的应用非常有用。

代码实践：

  1. 定义表单配置：

    // src/app/form-config.ts
export interface FormField {
  type: 'text' | 'select' | 'checkbox';
  name: string;
  label: string;
  options?: { key: string; value: string }[];
  validators?: string[]; // 例如 'required', 'email'
}
export const formConfig: FormField[] = [
  {
    type: 'text',
    name: 'firstName',
    label: 'First Name',
    validators: ['required'],
  },
  {
    type: 'text',
    name: 'lastName',
    label: 'Last Name',
    validators: ['required'],
  },
  {
    type: 'select',
    name: 'country',
    label: 'Country',
    options: [
      { key: 'us', value: 'United States' },
      { key: 'ca', value: 'Canada' },
      { key: 'uk', value: 'United Kingdom' },
    ],
    validators: ['required'],
  },
  {
    type: 'checkbox',
    name: 'subscribe',
    label: 'Subscribe to Newsletter',
  },
];
​

  2. 创建动态表单组件：

    // src/app/dynamic-form.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FormField } from './form-config';
@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css'],
})
export class DynamicFormComponent implements OnInit {
  @Input() formConfig: FormField[] = [];
  form: FormGroup = this.fb.group({});
  constructor(private fb: FormBuilder) {}
  ngOnInit(): void {
    this.formConfig.forEach((field) => {
      const validators = field.validators?.map((validatorName) => {
        switch (validatorName) {
          case 'required':
            return Validators.required;
          case 'email':
            return Validators.email;
          default:
            return null;
        }
      }).filter(v => v !== null); // 过滤掉无效的 validator
      this.form.addControl(field.name, this.fb.control('', validators));
    });
  }
  onSubmit(): void {
    if (this.form.valid) {
      console.log(this.form.value);
    } else {
      // 标记所有控件为 touched，显示错误
      Object.keys(this.form.controls).forEach(field => {
        const control = this.form.get(field);
        control?.markAsTouched({ onlySelf: true });
      });
    }
  }
}
​

  3. 创建动态表单模板：

    <!-- src/app/dynamic-form.component.html -->
<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div *ngFor="let field of formConfig">
    <label [for]="field.name">{{ field.label }}</label>
    <ng-container [ngSwitch]="field.type">
      <input *ngSwitchCase="'text'" type="text" [id]="field.name" [formControlName]="field.name" />
      <select *ngSwitchCase="'select'" [id]="field.name" [formControlName]="field.name">
        <option value="">Select...</option>
        <option *ngFor="let option of field.options" [value]="option.key">{{ option.value }}</option>
      </select>
      <input *ngSwitchCase="'checkbox'" type="checkbox" [id]="field.name" [formControlName]="field.name" />
    </ng-container>
    <div *ngIf="form.get(field.name)?.invalid && (form.get(field.name)?.dirty || form.get(field.name)?.touched)" class="error">
      <div *ngIf="form.get(field.name)?.errors?.['required']">
        {{ field.label }} is required.
      </div>
      <div *ngIf="form.get(field.name)?.errors?.['email']">
        {{ field.label }} is not a valid email.
      </div>
    </div>
  </div>
  <button type="submit">Submit</button>
</form>
​

  4. 在父组件中使用动态表单组件：

    // src/app/app.component.ts
import { Component } from '@angular/core';
import { formConfig } from './form-config';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  formConfig = formConfig;
}
​
    <!-- src/app/app.component.html -->
<app-dynamic-form [formConfig]="formConfig"></app-dynamic-form>
​

3.3 Web Workers

Web Workers 允许你在后台线程中运行 JavaScript 代码，而不会阻塞主线程，从而提高应用的响应性和性能。 这对于执行计算密集型任务，例如图像处理、数据分析或复杂算法非常有用。

代码实践：

  1. 创建 Web Worker 文件：

    // src/app/app.worker.ts
addEventListener('message', ({ data }) => {
  const result = data * 2; // 模拟一个耗时计算
  postMessage(result);
});
​

  2. 在组件中使用 Web Worker：

    // src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  result: number | null = null;
  inputNumber = 10;
  ngOnInit(): void {
    if (typeof Worker !== 'undefined') {
      // Create a new
      const worker = new Worker(new URL('./app.worker', import.meta.url));
      worker.onmessage = ({ data }) => {
        this.result = data;
      };
      worker.onerror = (error) => {
        console.error('Worker error:', error);
      };
      worker.postMessage(this.inputNumber);
    } else {
      // Web Workers are not supported in this environment.
      // You should add a fallback so that your program still executes correctly.
      console.log('Web Workers are not supported in this environment.');
    }
  }
  calculate(): void {
    if (typeof Worker !== 'undefined') {
      const worker = new Worker(new URL('./app.worker', import.meta.url));
      worker.onmessage = ({ data }) => {
        this.result = data;
      };
      worker.onerror = (error) => {
        console.error('Worker error:', error);
      };
      worker.postMessage(this.inputNumber);
    } else {
      console.log('Web Workers are not supported in this environment.');
      this.result = this.inputNumber * 2;
    }
  }
}
​
    <!-- src/app/app.component.html -->
<input type="number" [(ngModel)]="inputNumber" />
<button (click)="calculate()">Calculate</button>
<p>Result: {{ result }}</p>
​

  3. 配置 angular.json：

    确保 angular.json 文件中配置了 Web Worker 的支持。 在 projects.[your-project-name].architect.build.options 中添加:

    "webWorkerTsConfig": "./tsconfig.worker.json"
​

    同时，创建 tsconfig.worker.json:

    {
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "lib": ["es2020", "webworker"],
    "outDir": "./out-tsc/worker",
    "target": "es2020"
  },
  "include": ["src/**/*.worker.ts"]
}
​

Web Worker 流程：

graph TD A[Component] --> B(Create Worker); B --> C(Post Message); C --> D[Worker Thread]; D --> E(Calculate); E --> F(Post Message); F --> A;

3.4 Server-Side Rendering (SSR)

SSR 允许你在服务器端渲染 Angular 应用，然后将渲染好的 HTML 发送给客户端。 这可以提高应用的首次加载速度、改善 SEO，并提供更好的用户体验。

代码实践：

  1. 安装 Angular Universal:

    ng add @nguniversal/express-engine
​

  2. 构建和运行 SSR 应用：

    npm run build:ssr && npm run serve:ssr
​

SSR 流程：

graph TD A[Browser] --> B(Request Page); B --> C[Server]; C --> D(Render Angular App); D --> E(Return HTML); E --> A;

3.5 微前端 (Micro Frontends)

微前端是一种将大型前端应用拆分为多个小型、独立部署的应用程序的技术。 每个微前端可以由不同的团队开发和维护，并使用不同的技术栈。

常见的微前端架构：

  • Build-time integration: 在构建时将所有微前端集成到一个应用中。

  • Run-time integration: 在运行时动态加载和渲染微前端。

    • Web Components: 使用 Web Components 作为微前端的容器。

    • Iframes: 使用 Iframes 隔离微前端。

    • Module Federation: 使用 webpack 的 Module Federation 功能动态加载和共享代码。

Module Federation 示例 (webpack 5):

假设有两个 Angular 应用：app1 和 app2。 app1 需要使用 app2 暴露的组件。

app2 (Remote):

  1. 配置 webpack.config.js:

    const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
  // ... 其他配置
  plugins: [
    new ModuleFederationPlugin({
      name: "app2",
      filename: "remoteEntry.js",
      exposes: {
        "./MyComponent": "./src/app/my-component/my-component.component.ts",
      },
      shared: {
        "@angular/core": { singleton: true, strictVersion: true },
        "@angular/common": { singleton: true, strictVersion: true },
        "@angular/router": { singleton: true, strictVersion: true },
      },
    }),
  ],
};
​

  2. 暴露组件：

    确保 src/app/my-component/my-component.component.ts 存在。

app1 (Host):

  1. 配置 webpack.config.js:

    const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
  // ... 其他配置
  plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      remotes: {
        "app2": "app2@http://localhost:4201/remoteEntry.js", // app2 的地址
      },
      shared: {
        "@angular/core": { singleton: true, strictVersion: true },
        "@angular/common": { singleton: true, strictVersion: true },
        "@angular/router": { singleton: true, strictVersion: true },
      },
    }),
  ],
};
​

  2. 使用远程组件：

    // src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    <h1>App 1</h1>
    <app2-my-component></app2-my-component>
  `,
})
export class AppComponent implements OnInit {
  async ngOnInit() {
    // 动态加载远程模块 (可选)
    // const { MyComponentComponent } = await import('app2/MyComponent');
  }
}
​

  3. 创建自定义元素包装器：

    因为 app1 不直接知道 app2 的组件，我们需要创建一个自定义元素包装器。

    // src/app/my-component-wrapper.directive.ts
import { Directive, ElementRef, OnInit } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { MyComponentComponent } from 'projects/app2/src/app/my-component/my-component.component'; // 替换为 app2 的实际路径
import { ApplicationRef, Injector } from '@angular/core';
@Directive({
  selector: 'app2-my-component'
})
export class MyComponentWrapperDirective implements OnInit {
  constructor(private el: ElementRef, private injector: Injector, private appRef: ApplicationRef) { }
  ngOnInit(): void {
    // Check if the custom element is already defined
    if (!customElements.get('app2-my-component')) {
      // Create a custom element from the Angular component
      const MyCustomElement = createCustomElement(MyComponentComponent, {
        injector: this.injector
      });
      // Define the custom element
      customElements.define('app2-my-component', MyCustomElement);
    }
    // Manually attach the component to the application view
    const element = document.createElement('app2-my-component');
    this.el.nativeElement.appendChild(element);
  }
}
​

    确保在 app1 的 AppModule 中声明 MyComponentWrapperDirective。

微前端架构：

graph TD A[Browser] --> B(Request); B --> C{Host Application}; C --> D[Micro Frontend 1]; C --> E[Micro Frontend 2]; D --> F(Rendered Component); E --> G(Rendered Component); F --> A; G --> A;

3.6 高级 RxJS 技术

RxJS 是 Angular 的核心依赖项，用于处理异步操作和事件流。 掌握高级 RxJS 技术可以显著提高代码的可读性、可维护性和性能。

  • Custom Operators: 创建自定义的 RxJS 操作符来封装复杂的逻辑。

  • Schedulers: 控制 Observable 的执行时机，例如 asyncScheduler、queueScheduler。

  • Subjects: 同时充当 Observable 和 Observer，可以多播值。 例如 BehaviorSubject、ReplaySubject。

  • Error Handling: 使用 catchError 操作符优雅地处理错误。

  • Testing: 使用 TestScheduler 测试 RxJS 代码。

代码实践 (Custom Operator):

// src/app/custom-operators.ts
import { Observable, OperatorFunction } from 'rxjs';
import { filter, map } from 'rxjs/operators';
export function filterEvenNumbers(): OperatorFunction<number, number> {
  return (source: Observable<number>) => {
    return source.pipe(
      filter((value) => value % 2 === 0),
      map((value) => value * 2)
    );
  };
}
​
// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { from } from 'rxjs';
import { filterEvenNumbers } from './custom-operators';
@Component({
  selector: 'app-root',
  template: `
    <h1>RxJS Example</h1>
    <ul>
      <li *ngFor="let item of evenNumbers">{{ item }}</li>
    </ul>
  `,
})
export class AppComponent implements OnInit {
  evenNumbers: number[] = [];
  ngOnInit(): void {
    from([1, 2, 3, 4, 5, 6])
      .pipe(filterEvenNumbers())
      .subscribe((value) => {
        this.evenNumbers.push(value);
      });
  }
}
​

这些高级主题可以帮助你构建更强大、更可维护和更高性能的 Angular 应用程序。 通过深入研究这些概念并进行实践，你将能够更好地应对复杂的开发挑战。

发布者: 作者: 转发
评论区 (0)
U
0/500