面试题：Angular中组件通信方式及实现原理

父子组件通信

父传子
- 使用@Input()装饰器：
  - 在子组件中定义一个输入属性。例如，在子组件child.component.ts中：

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

@Component({
  selector: 'app - child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() parentData: string;
}

 - 在父组件模板中使用子组件，并传递数据。如在父组件`parent.component.html`中：

<app - child [parentData]="parentMessage"></app - child>

 - 在父组件`parent.component.ts`中定义`parentMessage`：

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

@Component({
  selector: 'app - parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  parentMessage = 'Hello from parent';
}

子传父
- 使用@Output()和EventEmitter：
  - 在子组件中定义一个EventEmitter并使用@Output()装饰器。在child.component.ts中：

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

@Component({
  selector: 'app - child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Output() childEvent = new EventEmitter<string>();
  sendDataToParent() {
    this.childEvent.emit('Hello from child');
  }
}

 - 在父组件模板中监听子组件的事件。在`parent.component.html`中：

<app - child (childEvent)="handleChildEvent($event)"></app - child>

 - 在父组件`parent.component.ts`中定义`handleChildEvent`方法：

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

@Component({
  selector: 'app - parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  handleChildEvent(data: string) {
    console.log('Received from child:', data);
  }
}

兄弟组件通信

通过共享服务：
- 创建一个共享服务，例如shared.service.ts：

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

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

  sendData(data: string) {
    this.sharedData.next(data);
  }

  getData() {
    return this.sharedData.asObservable();
  }
}

在第一个兄弟组件（发送数据的组件）中注入并使用共享服务发送数据。如在sender.component.ts中：

import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app - sender',
  templateUrl: './sender.component.html',
  styleUrls: ['./sender.component.css']
})
export class SenderComponent {
  constructor(private sharedService: SharedService) {}

  send() {
    this.sharedService.sendData('Hello from sender');
  }
}

在第二个兄弟组件（接收数据的组件）中注入共享服务并订阅数据。在receiver.component.ts中：

import { Component, OnInit } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app - receiver',
  templateUrl: './receiver.component.html',
  styleUrls: ['./receiver.component.css']
})
export class ReceiverComponent implements OnInit {
  receivedData: string;

  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    this.sharedService.getData().subscribe(data => {
      this.receivedData = data;
    });
  }
}

非直接关联组件通信

同样可以通过共享服务：原理与兄弟组件通信类似。
- 任意组件都可以注入共享服务。
- 发送数据的组件调用共享服务的发送方法，如sharedService.sendData('Some data')。
- 接收数据的组件订阅共享服务的可观察对象，如sharedService.getData().subscribe(data => { /* handle data */ })。
- 这种方式可以跨越多个层级的组件树进行通信，只要相关组件都注入了同一个共享服务实例。

星途面试题库

面试题：Angular中组件通信方式及实现原理

知识考点

面试题答案

父子组件通信

兄弟组件通信

非直接关联组件通信