面试题：Angular数据绑定在跨组件通信中的深度应用与挑战

数据传递方案设计

输入属性（@Input()）：对于父组件向子组件传递数据，在子组件中使用 @Input() 装饰器定义输入属性。例如，父组件有一个 user 对象需要传递给子组件：

// 子组件
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  @Input() user: {name: string, age: number};
}

<!-- 父组件模板 -->
<app-child [user]="currentUser"></app-child>

输出属性（@Output()）和事件绑定：当子组件需要向父组件传递数据时，使用 @Output() 装饰器和 EventEmitter。比如子组件有一个按钮点击事件需要传递数据给父组件：

// 子组件
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  @Output() buttonClick = new EventEmitter<string>();

  onClick() {
    this.buttonClick.emit('Button was clicked');
  }
}

<!-- 子组件模板 -->
<button (click)="onClick()">Click me</button>

<!-- 父组件模板 -->
<app-child (buttonClick)="handleChildClick($event)"></app-child>

服务（Service）：对于跨层级的数据共享，可以使用服务。例如，创建一个 DataService：

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private sharedData: string;

  setData(data: string) {
    this.sharedData = data;
  }

  getData() {
    return this.sharedData;
  }
}

不同层级的组件都可以注入该服务并获取或设置共享数据：

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

@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html'
})
export class Component1Component {
  constructor(private dataService: DataService) {
    this.dataService.setData('Initial data');
  }
}

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

@Component({
  selector: 'app-component2',
  templateUrl: './component2.component.html'
})
export class Component2Component {
  dataFromService: string;
  constructor(private dataService: DataService) {
    this.dataFromService = this.dataService.getData();
  }
}

可能遇到的挑战及解决方法

数据变化监测问题

挑战：当使用服务进行数据共享时，组件可能无法及时感知到数据的变化。
解决方法：可以使用 BehaviorSubject 或 ReplaySubject 来代替普通变量。例如，修改 DataService 如下：

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private sharedDataSubject = new BehaviorSubject<string>('');
  sharedData$ = this.sharedDataSubject.asObservable();

  setData(data: string) {
    this.sharedDataSubject.next(data);
  }
}

组件订阅 sharedData$ 来监听数据变化：

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

@Component({
  selector: 'app-component2',
  templateUrl: './component2.component.html'
})
export class Component2Component {
  dataFromService: string;
  constructor(private dataService: DataService) {
    this.dataService.sharedData$.subscribe(data => {
      this.dataFromService = data;
    });
  }
}

组件层级过深导致传递繁琐
- 挑战：在多层嵌套组件中，使用输入输出属性传递数据可能导致中间层组件只是单纯传递数据，增加代码冗余。
- 解决方法：除了使用服务，还可以考虑使用 @Directive 结合 ElementRef 和 Renderer2 来直接操作 DOM 元素传递数据，避免层层传递。例如，创建一个自定义指令：
```
import { Directive, ElementRef, Renderer2, Input } from '@angular/core';

@Directive({
  selector: '[appCustomData]'
})
export class CustomDataDirective {
  @Input('appCustomData') data: string;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit() {
    this.renderer.setAttribute(this.el.nativeElement, 'data - custom', this.data);
  }
}
```
在模板中可以直接使用该指令：
```
<div appCustomData="Some data"></div>
```

数据一致性问题

挑战：多个组件同时操作共享数据可能导致数据不一致。
解决方法：在服务中封装数据操作方法，确保数据操作的原子性和一致性。例如，在 DataService 中添加一个方法来修改共享数据：

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private sharedDataSubject = new BehaviorSubject<string>('');
  sharedData$ = this.sharedDataSubject.asObservable();

  setData(data: string) {
    this.sharedDataSubject.next(data);
  }

  updateData(newPart: string) {
    const currentData = this.sharedDataSubject.getValue();
    this.sharedDataSubject.next(currentData + newPart);
  }
}

组件通过调用 updateData 方法来修改数据，保证数据修改的一致性。

星途面试题库

面试题：Angular数据绑定在跨组件通信中的深度应用与挑战

知识考点

面试题答案

数据传递方案设计

可能遇到的挑战及解决方法