Angular 入门教程：06 揭秘 Angular 组件间通信的奥秘

前端

2023-09-22 04:52:57

Angular 组件间通信指南：打造健壮且可维护的应用

引言

在 Angular 应用中，组件间的通信至关重要，它赋予了组件协作、交换数据和响应彼此的能力。了解各种通信方式对于构建健壮且可维护的 Angular 应用至关重要。本文将深入探讨不同的通信方式，并提供实际示例来帮助您掌握它们。

父子组件通信

父子组件通信是最直接的通信方式，它允许父组件向子组件传递数据或指令，而子组件可以向父组件发送事件或更新数据。

1. @Input：父组件向子组件传递数据

@Input 修饰符用于将父组件的数据传递给子组件。在子组件中，使用 @Input() 来接收父组件传递的数据。

代码示例：

// 父组件
@Component({
  selector: 'app-parent',
  template: `<app-child [data]="data"></app-child>`,
})
export class ParentComponent {
  data = 'Hello, child!';
}

// 子组件
@Component({
  selector: 'app-child',
  template: `<p>{{ data }}</p>`,
})
export class ChildComponent {
  @Input() data: string;
}

2. @Output：子组件向父组件传递事件

@Output 修饰符用于将子组件的事件传递给父组件。在子组件中，使用 @Output() 来触发事件，在父组件中，使用 () 来监听子组件发出的事件。

代码示例：

// 子组件
@Component({
  selector: 'app-child',
  template: `<button (click)="onClick()">Send data</button>`,
})
export class ChildComponent {
  @Output() onClick = new EventEmitter<string>();

  onClick() {
    this.onClick.emit('Hello, parent!');
  }
}

// 父组件
@Component({
  selector: 'app-parent',
  template: `<app-child (onClick)="onChildClick($event)"></app-child>`,
})
export class ParentComponent {
  onChildClick(data: string) {
    console.log(`Received data from child: ${data}`);
  }
}

兄弟组件通信

兄弟组件通信是指两个没有父子关系的组件之间的通信。它通常通过服务或事件总线来实现。

1. 服务通信

服务是 Angular 中的全局可用的类，可以被其他组件注入和使用。它们通常用于在组件之间共享数据或状态。

代码示例：

// 服务
@Injectable()
export class DataService {
  private data: string;

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

  getData() {
    return this.data;
  }
}

// 组件 A
@Component({
  selector: 'app-component-a',
  template: `<button (click)="sendData()">Send data</button>`,
})
export class ComponentA {
  constructor(private dataService: DataService) {}

  sendData() {
    this.dataService.setData('Hello, component B!');
  }
}

// 组件 B
@Component({
  selector: 'app-component-b',
  template: `<p>{{ data }}</p>`,
})
export class ComponentB {
  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.data = this.dataService.getData();
  }
}

2. 事件总线

事件总线是一个组件之间通信的机制，它允许组件发布和订阅事件，而不必知道事件的发布者或订阅者。

代码示例：

// 事件总线服务
@Injectable()
export class EventBusService {
  private events: Subject<any> = new Subject();

  publish(event: any) {
    this.events.next(event);
  }

  subscribe(event: string, callback: (data: any) => void) {
    this.events.pipe(filter(e => e.type === event)).subscribe(callback);
  }
}

// 组件 A
@Component({
  selector: 'app-component-a',
  template: `<button (click)="sendData()">Send data</button>`,
})
export class ComponentA {
  constructor(private eventBusService: EventBusService) {}

  sendData() {
    this.eventBusService.publish({ type: 'data', data: 'Hello, component B!' });
  }
}

// 组件 B
@Component({
  selector: 'app-component-b',
  template: `<p>{{ data }}</p>`,
})
export class ComponentB {
  constructor(private eventBusService: EventBusService) {}

  ngOnInit() {
    this.eventBusService.subscribe('data', (data: any) => {
      this.data = data;
    });
  }
}

路由通信

路由通信通过路由来传递数据或触发事件。在 Angular 中，可以使用 ActivatedRoute 来访问路由参数和查询参数。

代码示例：

// 父组件
@Component({
  selector: 'app-parent',
  template: `<router-outlet></router-outlet>`,
})
export class ParentComponent {}

// 子组件
@Component({
  selector: 'app-child',
  template: `<p>{{ data }}</p>`,
})
export class ChildComponent {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.data = this.route.snapshot.queryParams['data'];
  }
}

// 路由配置
const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
  },
  {
    path: 'child',
    component: ChildComponent,
    queryParams: {
      data: 'Hello, child!'
    }
  },
];

自定义事件

自定义事件是指组件自己定义的事件，可以在组件内部或组件之间触发和监听。

代码示例：

// 组件
@Component({
  selector: 'app-component',
  template: `<button (click)="onButtonClick()">Click me</button>`,
})
export class Component {
  @Output() onClick = new EventEmitter<string>();

  onButtonClick() {
    this.onClick.emit('Hello, world!');
  }
}

// 父组件
@Component({
  selector: 'app-parent',
  template: `<app-component (onClick)="onChildClick($event)"></app-component>`,
})
export class ParentComponent {
  onChildClick(data: string) {
    console.log(`Received data from child: ${data}`);
  }
}