面试题：Angular属性绑定与事件绑定在跨组件通信中的优化策略

减少不必要的渲染

OnPush策略：
- 原理：将组件的 changeDetection 属性设置为 ChangeDetectionStrategy.OnPush。当组件的输入属性引用不变，并且没有从该组件或其子组件触发的事件时，Angular 不会检查该组件及其子组件的变化。
- 示例：

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
  @Input() data: any;
}

不可变数据结构：
- 原理：使用不可变数据结构，避免直接修改对象或数组。当数据发生变化时，创建新的数据实例。这样在 OnPush 策略下，Angular 可以更准确地判断数据是否变化，从而减少不必要的渲染。
- 示例：

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  items = [1, 2, 3];

  updateItems() {
    // 创建新数组而不是直接修改原数组
    this.items = [...this.items, 4];
  }
}

提升数据传递效率

服务（Service）：
- 原理：通过创建一个共享服务，组件之间可以通过服务来传递数据，而不是通过层层属性绑定。这样可以减少属性在父子组件链上的传递，提高数据传递效率。
- 示例：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data: any;

  setData(newData: any) {
    this.data = newData;
  }

  getData() {
    return this.data;
  }
}

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app - component - one',
  templateUrl: './component - one.component.html'
})
export class ComponentOne {
  constructor(private dataService: DataService) {}

  shareData() {
    const dataToShare = { message: 'Hello from Component One' };
    this.dataService.setData(dataToShare);
  }
}

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app - component - two',
  templateUrl: './component - two.component.html'
})
export class ComponentTwo {
  sharedData: any;
  constructor(private dataService: DataService) {
    this.sharedData = this.dataService.getData();
  }
}

RxJS Subject和BehaviorSubject：
- 原理：Subject 是 RxJS 中的一种可观察对象，它可以多播给多个观察者。BehaviorSubject 是 Subject 的一种变体，它会保存“当前”值，并将这个值发送给新的订阅者。通过在服务中使用 Subject 或 BehaviorSubject，组件可以监听数据的变化。
- 示例：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MessageService {
  private messageSubject = new Subject<string>();

  sendMessage(message: string) {
    this.messageSubject.next(message);
  }

  getMessage() {
    return this.messageSubject.asObservable();
  }
}

import { Component } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'app - sender - component',
  templateUrl: './sender - component.html'
})
export class SenderComponent {
  constructor(private messageService: MessageService) {}

  send() {
    this.messageService.sendMessage('New message');
  }
}

import { Component } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'app - receiver - component',
  templateUrl: './receiver - component.html'
})
export class ReceiverComponent {
  message: string;
  constructor(private messageService: MessageService) {
    this.messageService.getMessage().subscribe((msg) => {
      this.message = msg;
    });
  }
}

星途面试题库

面试题：Angular属性绑定与事件绑定在跨组件通信中的优化策略

知识考点

面试题答案

减少不必要的渲染

提升数据传递效率